如何取消下一个事件调用？

Question

我有一个事件 "pointerdown" 但我希望它在某个回调中满足特定条件时取消事件调用。因此，不应调用所有下一个回调。

我试过了evt.preventDefault();但这不起作用，我也试过 evt.stopPropagation();但这不起作用。

const pointer = getMousePos(evt);
if (inBounds(pointer)) {
    evt.preventDefault();
    evt.stopPropagation();
}

inBounds 函数returns 符合预期，但事件的下一个回调仍会被调用。此事件首先添加，在我希望取消但它们没有取消的其他事件之前。

Answer 1

使用您切换的全局变量来指示其他事件代码是否应该运行。

let doBFunction = true;
element.addEventListener("pointerdown", function(evt) {
    const pointer = getMousePos(evt);
    if (inBounds(pointer)) {
        doBFunction = false;
    } else {
        doBFunction = true;
    }
    // rest of code
});
element.addEventListner("pointerdown", function(evt) {
    if (!doBfunction) {
        return;
    }
    // rest of code
});

Answer 2

如果您的监听器附加在同一个元素上，您将需要使用 stopImmediatePropagation() 而不是 stopPropagation()

The stopImmediatePropagation() method of the Event interface prevents other listeners of the same event from being called.

If several listeners are attached to the same element for the same event type, they are called in the order in which they were added. If stopImmediatePropagation() is invoked during one such call, no remaining listeners will be called.

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation

您还可以在此处找到关于这两种方法之间差异的一些说明： stopPropagation vs. stopImmediatePropagation

这里有一个关于如何使用它的小演示。在这种情况下，当计数器为偶数时，将永远不会调用第二个侦听器。

let counter = 0

const button = document.getElementById('TheButton')

button.addEventListener('click', e => {
  counter++
  
  console.log(`first listener: ${counter}`)
  
  if (counter % 2 === 0) e.stopImmediatePropagation()
})

button.addEventListener('click', e => {
  console.log(`second listener: ${counter}`)
})

<button id="TheButton">
OK
</button>

如何取消下一个事件调用？

How to cancel next event calls?

javascript

cancellation

preventdefault

stoppropagation