javascript - 第一次使用 jquery/javascript 防止警报

Question

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

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

Answer 1

事件“气泡”，在a元素及其父元素上触发，您可以强制 jquery 停止在此元素上方触发更多事件，如下所示：

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

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

function perform() {
    alert(0)
}

Answer 2

因为点击事件传播和冒泡 DOM。将您的代码更改为：

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

jsFiddle 示例

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

Answer 3

发生的事情称为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);
    });
});

这是一个很好的链接：Javascript中的事件传播

Answer 4

在点击事件之前试试这个

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