Как отменить следующие вызовы событий?
У меня есть событие "pointerdown", но я хочу, чтобы оно отменяло вызов события, когда в одном из обратных вызовов выполняется определенное условие. Таким образом, все следующие обратные вызовы не должны вызываться.
Я пробовал evt.preventDefault(); но это не работает, я также пробовал evt.stopPropagation(); но это не работает.
const pointer = getMousePos(evt);
if (inBounds(pointer)) {
evt.preventDefault();
evt.stopPropagation();
}
Функция inBounds возвращает true, как и ожидалось, но следующие обратные вызовы события все еще вызываются. Это событие добавляется первым, перед другими событиями, которые я хочу отменить, но это не так.
Есть ли какое-либо событие, которое позволяет мне прекратить вызывать более поздние события? Или мне придется кодировать это самому?
Что вы имеете в виду под более поздними событиями? Непонятно, что вы на самом деле пытаетесь сделать. Вы можете установить глобальную переменную и проверить ее в прослушивателе событий. Если переменная установлена, просто вернитесь из функции слушателя вместо того, чтобы что-то делать.
Например, если я добавлю функцию A в событие "pointerdown". И затем я добавляю функцию B в событие "pointerdown". Я хочу вызвать что-то в функции A, чтобы она не вызывала все следующие функции, которые включают функцию B.
Попробуйте установить для useCapture (третий параметр) значение true, чтобы посмотреть, поможет ли это.
Я сделал. Ничего не изменилось :(
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Используйте глобальную переменную, которую вы переключаете, чтобы указать, должен ли выполняться другой код события.
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
});
Если ваши слушатели прикреплены к одному и тому же элементу, вам нужно будет использовать 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 против stopImmediatePropagation
Вот небольшая демонстрация того, как вы можете его использовать. В этом случае второй прослушиватель никогда не будет вызываться, когда счетчик является четным числом.
let counter = 0
const button = document.getElementById('TheButton')
button.addEventListener('click', e => {
counter++
console.info(`first listener: ${counter}`)
if (counter % 2 === 0) e.stopImmediatePropagation()
})
button.addEventListener('click', e => {
console.info(`second listener: ${counter}`)
})<button id = "TheButton">
OK
</button>Это именно то, что мне было нужно! Спасибо!
stopPropagationпредназначен для предотвращения передачи текущего события внешним элементам в DOM.preventDefault()предотвращает нормальное действие события (например, нажатие кнопки отправки отправляет форму). Ни один из них не имеет никакого отношения к более поздним событиям.