嵌套列表，jquery和stopPropagation [英] Nested Lists, jquery, and stopPropagation

问题描述

我遇到了嵌套菜单无法按我预期的方式运行的问题.我在StackOverflow上浏览了很多有关stopPropagation()的内容，但似乎并不起作用.

I'm running into an issue with nested menus not acting the way I'm anticipating. I've looked through a bunch of stuff on StackOverflow regarding stopPropagation(), but it just doesn't seem to be working.

不幸的是，该网站是基于Wordpress的，因此我无法直接控制该网站的菜单所生成的HTML.该项目的最初目标是向菜单项添加onClick功能，而Wordpress本身不支持.该部分有效-当我单击菜单时，事件触发.耶！但是，父元素的事件也会触发.这就是造成问题的原因(因为已将onClick功能用于点击跟踪).

The site is wordpress based, unfortunately, so I don't have direct control of the HTML generated by the menus on the site. The original goal of this project was to add onClick functionality to the menu items, which Wordpress doesn't natively support. That part works - when I click the menus, events fire. Yay! However, the events of the parent element also fires. And that's causing issues (since the onClick functionality was put in place for click tracking).

这里是菜单的第一部分，因为它是通过wordpress渲染的(为简化可读性):

Here is the first part of the menu, as it renders by wordpress (shortened for readability):

<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代码，该代码附加在菜单页面上:

Here's the generated jquery code that is appended to the page for the menu:

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事件将成功触发，而父元素也将触发.

When I click on any of the child elements (What we do, company news, etc), The onclick event fires successfully AND the parent element also fires.

因此，如果我单击公司新闻"菜单项，则控制台将包含以下内容:

So, if I were to click on the 'Company News' menu item, the console would contain this:

Learn About Us menu
Company News menu

更重要的是，如果我添加event.stopImmediatePropagation();对于每个jquery块，只有父元素会触发. event.stopPropagation();似乎没有任何作用.

The kicker is if I add event.stopImmediatePropagation(); to each of the jquery blocks, only the parent element fires. event.stopPropagation(); doesn't seem to have any effect.

我需要在jQuery中添加什么以防止在调用子元素时触发父元素?

What do I need to add to the jQuery to prevent the parent elements from firing when child elements are called?

推荐答案

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

The problem is you have used descendant selector instead of child selector to target the anchor element.

$("#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');
});

演示:小提琴

当您说li#menu-item-104 a时，它将单击处理程序绑定到li#menu-item-104内的所有锚点元素，其中包括Learn About Us元素和所有子菜单项，即使您尝试执行以下操作，该处理程序也会被调用停止传播.

When you say li#menu-item-104 a, it binds the click handler to all anchor elements inside li#menu-item-104, which includes the Learn About Us element and all the sub menu items which is resulting in that handler getting called even when you try to stop the propagation.

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

Now since the first handler is added to all the anchor elements the stopPropagation() will not have any effect.

这篇关于嵌套列表，jquery和stopPropagation的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！