Question

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

$('#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上发生click事件时，首先执行关联的处理程序。这会将单击事件绑定到文档正文本身在此之后，该事件会冒泡，因此#openMenu的父母也会收到点击事件，并且由于document.body是#openMenu的父级，因此它还会收到点击事件并关闭弹出窗口immediatley。

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

为什么文档单击侦听器会立即触发？

1 个答案: