javascript - 为什么文档点击监听器会立即触发？

Question

我想在通过单击打开某些菜单时将单击功能绑定(bind)到文档。问题是，当触发第一个事件“单击菜单”时，附加到文档的功能已被同一事件触发并关闭菜单。怎么解决这个问题。我的代码是这样的:

$('#openMenu').bind('click touchend', function(e){
    e.preventDefault();
    $('.openMobMenu').removeClass('openMobMenu');//Close All elements
    var _this=$('#headMenu')
    _this.addClass('openMobMenu');

    $(document).bind('click touchend',{elem:_this},hideElementMob);
});

// bind click event listner to the document
function hideElementMob(e){

    var th=e.data.elem;//Get the open element
    var target=$(e.target);//Get the clicked target

        //Check the target and close the element if need
    if(target.parents('.openMobMenu').length==0) { 
        th.removeClass('openMobMenu');//close the element if need
        //Unbind listner after closing the element
        $(document).unbind('click touchend');
    } 
} 

提前谢谢您!

Answer 1

尝试稍微延迟一下添加关闭处理程序:

setTimeout(function(){
    $(document).bind('click touchend',{elem:_this},hideElementMob);
}, 10);

正如 Jan Dvorak 建议的那样，您应该使用 .on() 附加事件。

更新
我意识到我没有回答整个问题，因此这里对“为什么它会这样”部分进行了一些改进:

当#openMenu上发生点击事件时，首先执行关联的处理程序。这会将单击事件绑定(bind)到文档正文本身。
此后，该事件将冒泡，因此 #openMenu 的父级也会收到单击事件，并且由于 document.body 是 #openMenu 的父级，它还会收到点击事件并立即关闭弹出窗口。

要取消事件冒泡，您还可以在事件处理程序中的任意位置调用 e.stopPropagation();。 (与 setTimeout 相比，也许它是一个更干净的解决方案)