Question

我想使用以下内容将hover事件应用于菜单中的多个列表项，使用'on'选择器过滤器，如下所示：

$('.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函数中的selected元素（event.target不起作用，因为它是最里面的元素（'a'元素）.event.delegateTarget是.menu和event。 relatedTarget是html元素。）

问题是，菜单有子菜单，所以一些li.parent项目在其他li.parents。悬停事件冒出来，当我将鼠标悬停在子菜单父项上时，也会触发它的悬停事件及其任何相关祖先。

如果我使用带有'this'的匿名函数但它不希望这样做，它可以正常工作。

有什么建议吗？

更新

以下是完整代码的链接：http://jsfiddle.net/mdbfLud9/

在进一步测试时，如果我删除timeOut和stopPropagation但是想保留timeOut

，代码会起作用

Answer 1

这是我的解决方案。位于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的事件委派的解决方案。此解决方案主要使用非父li上的事件来停止事件传播。

将所选元素传递给命名的单击事件处理函数，而不使用匿名函数

1 个答案: