Question

我在用户点击页面上的特定元素后，将click事件监听器附加到document。但是，在调用onclick函数后立即调用此事件侦听器，这是不合需要的。它似乎对onclick和刚刚添加的document click侦听器使用相同的点击事件。

如何确保添加到文档中的事件侦听器在下一次单击发生之前不会被调用？

document.getElementById('someID').onclick = function(e) {
    document.addEventListener('click', myDocClickListener);
    return false; //handled click
}

function myDocClickListener(e) {
    //...
    //should only be called for future clicks not the one that just occurred in the above function
}

Answer 1

这是因为事件冒泡而发生的。你需要在你的处理程序中停止冒泡：

document.getElementById('someID').onclick = function(e) {
    e.stopPropagation();
    document.addEventListener('click', myDocClickListener);
    return false; //handled click
};

您可能还需要跟踪是否已附加处理程序，因此如果单击someID两次，则最终不会将其附加两次。

除非此处理程序位于a元素上，否则您实际上不需要返回false。

在onclick中附加click事件侦听器会立即调用该事件侦听器

1 个答案: