jquery - stopPropagation() 阻止子级 onClick 函数

Question

我到处搜索，但找不到这个问题的答案。

我构建了一个菜单，其中包含几个 div:

<nav id="menu">
   <span>Open Menu</span>

   <div class="dropdownContain">
       <div class="dropOut">
          ...
          ...
          <div id="logout_wrap">
             <a id="logout">

还有一个使用 JQuery 的脚本，以便单击“#menu”时菜单出现(切换)，单击正文时菜单消失。对于此功能，我必须使用 stopPropagation() 方法来阻止 #dropDownContain 运行“body”的 hide() 函数

$(document).ready(function () {

    $('#menu').click(function (e) {
        e.stopPropagation();
        $('.dropdownContain').toggle();
    });

    $(document).click(function (e) {
        $('.dropdownContain').hide();
    });

    $('.dropdownContain').click(function (e) {
        e.stopPropagation();
    });

我还为“#dropdownContain”(菜单的主体)内的“#logout”创建了一个点击事件来运行 someThing() 函数。

jQuery('body').on('click', '#logout', function () {
    alert("THIS DOES NOT WORK");
});

问题是“#logout”的分配函数不会触发，因为在它的父级中调用了 stopPropagation() 方法(或者我认为是这样)。

这是此代码的 html + js 链接，以便您可以看到它的使用情况: JSFiddle

那么有没有解决方案可以解决这个问题，同时保持菜单弹出窗口按说明工作？

Answer 1

除非您有使用事件委托(delegate)的理由，否则您可以直接将点击绑定(bind)到注销链接。

jQuery('#logout').on('click', function () {
    alert("this works");
});

您使用的委托(delegate)版本仅在事件一直冒泡回到 body 元素时才会触发(但不会，因为您正在停止传播。)