Question

我想在文档上点击事件附加功能。我的功能是附加它，但它也调用它。我不明白为什么。 Demo

$(function () {
    $('a').click(function () {
        $(document).bind('click', perform)
    })
})
function perform() {
    alert(0)
}

Answer 1

事件'bubbles'，在a元素及其父元素上触发，你可以强制jquery阻止更多事件在这个元素上方触发：

http://jsfiddle.net/4yHC4/2/

$(function () {
    $('a').click(function (e) {
        $(document).bind('click', perform)
        e.stopPropagation();
    })
})

function perform() {
    alert(0)
}

Answer 2

由于click事件传播并冒泡DOM。将您的代码更改为：

$(function () {
    $('a').click(function (e) {
        e.stopPropagation();
        $(document).on('click', perform)
    })
})

<强> jsFiddle example

由于您的链接是body元素的后代，因此单击它实际上会向上移动DOM并触发绑定到它的祖先元素的任何单击事件。您可以使用链接上的.stopPropagation()来停止此操作。

Answer 3

在点击事件

之前试试这个

          $(document).unbind("click");
          $(document).bind("click" , perform);

Answer 4

发生的事情称为event propagation。当a元素上触发click事件时，document被绑定，然后click事件传播到文档并运行您的函数。

要阻止这种情况发生，请运行event.stopPropagation();。这样做是告诉浏览器：不要将此点击事件传播。

包含event.stopPropagation();的示例代码：

function perform() {
    alert(0);
}

$(function () { 
    $('a').click(function (event) {
        event.stopPropagation();

        $(document).bind('click',perform);
    });
});

这是一个很好的链接：Event propagation in Javascript

使用jquery / javascript首次防止警报

4 个答案: