JQuery 函数绑定到 body 节点的单击事件，并立即执行另一个单击事件答案

【问题标题】：JQuery function binded to click event of body node with another click event executed immediatelyJQuery 函数绑定到 body 节点的单击事件，并立即执行另一个单击事件
【发布时间】：2012-05-23 15:22:02
【问题描述】：

$().ready(function(){
    $("#move-to").click(function(){
        $("body").bind("click",function(){
            alert("foo");
        });
    }); 
});

为什么我在点击“移动到”后立即看到警报（“foo”）？
当我在文档中的某个 div 上绑定“警报”时，一切正常。
有大神帮忙吗？
我做错了什么？

【问题讨论】：

因为#move-to 点击正在传播到body 元素。在 JS 中称为事件传播。
你真的不应该在点击事件中绑定点击事件（除非你的用例是我猜的边缘情况）
@KevinB：这对于弹出菜单很有用。

标签： javascript jquery click bind

【解决方案1】：

在您的#move-to 处理程序运行后，点击事件冒泡到<body>，触发您刚刚绑定的处理程序。

您可以通过调用e.stopPropagation() 来防止这种情况发生。

或者，您可以通过将bind() 移动到setTimeout 调用，在此事件循环之后绑定<body> 点击事件。

【讨论】：

【解决方案2】：

$().ready(function(){
    $("#move-to").click(function(e){
      e.stopPropagation();
      $("body").bind("click",function(){
       alert("foo");
      });      
    }); 
});

但我认为当您单击#move-to 时，您会一次又一次地对单击事件进行代码绑定，如果您不在其他地方解除该单击事件的绑定，这将是不好的。

【讨论】：

当然可以。功能上会有unbind。它只是功能的简单变体。