所选元素传递给一个名为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事件处理函数，而无需使用匿名函数

回答

相关问题