Как отменить вызовы следующего события? - PullRequest
Новая
       78

Как отменить вызовы следующего события?

0 голосов
/ 20 июня 2019

У меня есть событие «указатель вниз», но я хочу, чтобы оно отменило вызов события, когда определенное условие выполнено в одном из обратных вызовов.Поэтому не следует вызывать все последующие обратные вызовы.

Я пробовал evt.preventDefault ();но это не работает, я также попытался evt.stopPropagation ();но это не работает. 

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

Функция inBounds возвращает true, как и ожидалось, но следующие обратные вызовы события по-прежнему вызываются.Это событие добавляется первым, перед другими событиями, которые я хочу отменить, но это не так.

Ответы [ 2 ]

0 голосов
/ 20 июня 2019

Если ваши слушатели подключены к одному и тому же элементу, вам нужно будет использовать stopImmediatePropagation() вместо stopPropagation()

Метод stopImmediatePropagation () интерфейса Event запрещает другим слушателям того же самогособытие от вызова.

Если к одному и тому же элементу подключены несколько слушателей для одного и того же типа события, они вызываются в том порядке, в котором они были добавлены.Если stopImmediatePropagation () вызывается во время одного такого вызова, остальные слушатели не будут вызываться.

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.log(`first listener: ${counter}`)
  
  if (counter % 2 === 0) e.stopImmediatePropagation()
})

button.addEventListener('click', e => {
  console.log(`second listener: ${counter}`)
})
<button id="TheButton">
OK
</button>
0 голосов
/ 20 июня 2019

Используйте глобальную переменную, которую вы переключаете, чтобы указать, должен ли выполняться другой код события. 

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
});
...