嵌套列表、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 中的所有锚元素，其中包括了解我们 元素和所有子菜单项，即使您尝试停止传播，也会调用该处理程序.

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屋！