所選元素傳遞給一個名爲click事件處理函數，而無需使用匿名函數

我想使用以下方法來使用「打開」選擇過濾器這樣的菜單懸停事件應用到多個列表項：所選元素傳遞給一個名爲click事件處理函數，而無需使用匿名函數

$('.menu').on('mouseenter mouseleave', 'li.parent', hoverHandler); 

var hoverHandler = function(event) { 
    var $el = $(event.currentTarget); 
    // Do some stuff with the selected element 
}

我能夠使用event.currentTarget訪問hoverHandler函數中的選定元素（event.target不起作用，因爲它是最內層的元素（'a'元素）。event.delegateTarget是.menu和event。 relatedTarget是html元素）。

問題是，菜單有子菜單，所以一些li.parent項目是在其他li.parents。懸停事件冒泡，因此當我將鼠標懸停在子菜單父項上時，它的懸停事件以及任何相關的祖先也會被觸發。

如果我用'this'使用匿名函數，但不希望這樣做，它會正常工作。

有什麼建議嗎？

更新

下面是完整的代碼的鏈接：http://jsfiddle.net/mdbfLud9/

在進一步測試代碼做工作，如果我刪除超時和stopPropagation但想保持超時

來源

2014-09-24 jbs

'event.stopPropagation（）;'應該消除冒泡 – DevlshOne 2014-09-24 00:14:31

爲什麼'this'不能用你當前的設置？你試過了嗎？ – PeterKA 2014-09-24 00:18:01

你可以使用.stopPropagation（），如http://jsfiddle.net/arunpjohny/zwpy1oLo/1/ – 2014-09-24 00:18:02

這是我的解決方案。工作實例位於http://jsfiddle.net/jyqsLacx/：

var timer = false; 

// Hide Submenus at startup 
$('.menu').find('ul').hide(); 

var hoverHandler = function (event) { 

    var $el = $(event.currentTarget); 
    var isParent = $el.hasClass('parent'); 

    if (isParent || event.type === 'mouseenter' || event.type === 'mouseover') { 
     clearTimeout(timer); 
     timer = setTimeout(function() { 
      // Contract any expanded siblings and their children 
      $el.parent().find('li.parent') 
       .removeClass('hover') 
       .find('ul') 
        .slideUp(); 
      if (isParent) { 
       if (event.type === 'mouseenter' || event.type === 'mouseover') { 
        // Expand sub menu 
        $el 
         .addClass('hover') 
         .children('ul') 
          .slideDown(); 
       } 
      } else { // not a parent 
       event.stopPropagation(); 
      } 
     }, 200); 
    } 
}; 

$('.menu').on('mouseenter mouseleave', 'li', hoverHandler);

我無法找到事件代表團的解決方案只是針對家長裏。此解決方案基本上使用非父li上的事件來停止事件傳播。

來源

2014-09-27 20:37:47 jbs

所選元素傳遞給一個名爲click事件處理函數，而無需使用匿名函數

回答

相關問題