javascript - 在 onclick 中附加点击事件监听器会立即调用该事件监听器

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。