Question

我到处搜索过，我无法找到这个问题的答案。

我在div中构建了一个带有几个div的菜单：

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

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

使用JQuery的脚本，以便在＆＃34;＃menu＆＃34;时出现（切换）菜单。单击并单击正文时单击并消失。对于这个功能，我不得不使用stopPropagation（）方法来阻止#dropDownContain运行＆＃34; body＆＃34; ＆＃39; hide（）函数

$(document).ready(function () {

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

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

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

我也为＆＃34;＃logout＆＃34;做了一个点击事件。里面是＆＃34; #dropdownContain＆＃34; （这是菜单的主体）运行someThing（）函数。

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

问题是＆＃34;＃logout＆＃34;由于在其父级中调用的stopPropagation（）方法（或者我认为），所以分配的函数不会触发。

此处为此代码指向html + js的链接，以便您可以看到它在使用中： JSFiddle

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

Answer 1

除非您有使用事件委派的原因，否则您只需将点击直接绑定到注销链接。

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

您使用的委托版本仅在事件一直回到body元素时才触发（由于您正在停止传播，因此不会这样做。）

Answer 2

停止使用stopPropagation并手动检查点击是否在#menu内：

$('#menu').on('click', function() {
    $('.dropdownContain').toggle();
});

$(document).on('click', function(e) {
    if (! $(e.target).is('#menu') || $(e.target).closest('#menu').length )
        $('.dropdownContain').hide();
});

stopPropagation（）阻止子进程onClick函数

2 个答案: