1

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

我在 div 中构建了一个包含几个 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

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

4

2 回答 2

2

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

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

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

于 2013-03-20T17:55:24.100 回答
1

停止使用 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();
});
于 2013-03-20T17:58:18.557 回答