Question

我遇到的问题是嵌套菜单没有按照我预期的方式运行。我在StackOverflow上查看了一些关于stopPropagation（）的内容，但它似乎没有用。

遗憾的是，该网站基于wordpress，因此我无法直接控制网站上菜单生成的HTML。该项目的最初目标是将onClick功能添加到菜单项，Wordpress本身不支持这些功能。该部分有效 - 当我点击菜单时，事件就会激活。好极了！但是，父元素的事件也会触发。这导致了问题（因为onClick功能已经实现了点击跟踪）。

这是菜单的第一部分，因为它通过wordpress呈现（缩短了可读性）：

<ul id="menu-main-menu" class="nav-menu">
    <li id="menu-item-104"><a href="#">Learn About Us</a>
        <ul class="sub-menu">
            <li id="menu-item-266" class=""><a href="#">What We Do</a></li>
            <li id="menu-item-268" class=""><a href="#">Company News</a></li>
            <li id="menu-item-269" class=""><a href="#">Our Leadership</a></li>
            <li id="menu-item-557" class=""><a href="#">Recognition</a></li>
            <li id="menu-item-270" class=""><a href="#">Our Heritage</a></li>
            <li id="menu-item-331" class=""><a href="#">Brand Guidelines</a></li>
        </ul>
    </li>
</ul>

这是生成的jquery代码，附加到菜单页面：

jQuery(document).ready(function($) {
    $("li#menu-item-104 a").on("click", function(event) { 
        console.log('Learn About Us menu'); 
    });
    $("li#menu-item-266 a").on("click", function(event) { 
        console.log('What We Do menu'); 
    });
    $("li#menu-item-268 a").on("click", function(event) { 
        console.log('Company News menu'); 
    });
    $("li#menu-item-269 a").on("click", function(event) { 
        console.log('Our Leadership menu'); 
    });
    $("li#menu-item-557 a").on("click", function(event) { 
        console.log('Recognition menu'); 
    });
    $("li#menu-item-270 a").on("click", function(event) { 
        console.log('Our Heritage menu'); 
    });
    $("li#menu-item-331 a").on("click", function(event) { 
        console.log('Brand Guidelines menu'); 
    });
});

当我点击任何子元素（我们做什么，公司新闻等）时，onclick事件成功触发，父元素也会触发。

因此，如果我点击“公司新闻”菜单项，控制台将包含以下内容：

Learn About Us menu
Company News menu

如果我添加event.stopImmediatePropagation（）;对于每个jquery块，只有父元素触发。 event.stopPropagation（）;似乎没有任何影响。

在调用子元素时，我需要添加什么来防止父元素被触发？

Answer 1

问题是您使用了后代选择器而不是子选择器来定位锚元素。

$("#menu-item-104 > a").on("click", function (event) {
    console.log('Learn About Us menu');
});
$("#menu-item-266 > a").on("click", function (event) {
    console.log('What We Do menu');
});

演示：Fiddle

当您说li#menu-item-104 a时，它会将点击处理程序绑定到li#menu-item-104内的所有锚元素，其中包含Learn About Us元素以及导致该处理程序获取的所有子菜单项即使你试图阻止传播也会调用。

现在，由于第一个处理程序被添加到所有锚元素，stopPropagation()将不起作用。

嵌套列表，jquery和stopPropagation

1 个答案: