Question

我已尝试在下面搜索我的问题的解释，但我使用的关键字可能不明确..所以我转向你。

我尝试根据此代码here实施点击外部菜单以关闭：

$('#menuscontainer').click(function(event) {
    //your code that shows the menus fully

    //now set up an event listener so that clicking anywhere outside will close the menu
    $('html').click(function(event) {
        //check up the tree of the click target to check whether user has clicked outside of menu
        if ($(event.target).parents('#menuscontainer').length==0) {
            // your code to hide menu

            //this event listener has done its job so we can unbind it.
            $(this).unbind(event);
        }

    })
});

然而，当点击$('html').click...时，#menucontainer中的函数似乎被执行，因此它只是打开并立即关闭。

我已将其简化为：

$('.trig').click(function () {
    $('.menu').show();
    $('body').click( function () {
        alert('boo');

    });
});

这里是JSFiddle link。

正如您可以看到在点击.trig时执行警报。因此，它似乎已经在倾听，而不仅仅是创建偶数监听器。

有人可以向我解释一下吗？感谢。

Answer 1

事件也给父母带来了泡沫。

您可以使用event.stopPropagation()

来防止这种情况发生

$('.trig').click(function (e) {
    e.stopPropagation();
    $('.menu').show();
    $('body').click( function () {
        alert('boo');    
    });
});

由于您在事件结束前向body添加了点击处理程序，因此身体上也会触发

参考：https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation

的 DEMO

创建事件函数在创建中执行

1 个答案: