在 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元素上，否则你真的不需要 return false。