Блог

Главная - Вопросы по программированию - Прослушиватель событий добавлен по щелчку, но запускается сразу?

Прослушиватель событий добавлен по щелчку, но запускается сразу?

#javascript

#javascript

Вопрос:

Я добавляю событие по нажатию моей кнопки:

 this.$refs.btn.addEventListener('click', this.turnOn);

В turnOn методе я добавляю прослушиватель в документ, чтобы запустить turnOff метод.

 turnOn() {
    document.addEventListener('click', this.turnOff);
}

Затем во время тестирования я нажимаю кнопку, и turnOn запускается метод, но этот первоначальный щелчок также запускает прослушиватель щелчков по документу.

Как я могу запустить turnOn метод, добавить прослушиватель документов, но не запускать прослушиватель щелчков по документу при первоначальном нажатии кнопки?

Комментарии:

1. вы добавляете 2 addEventListener ?

2. 2 прослушивателя событий для 2 разных элементов.

3. не могли бы вы объяснить, что у вас есть и что вы хотите сделать

Ответ №1:

Это происходит из-за пузырящегося события.При нажатии на <button> EventListener прикрепляется к телу, и после этого из-за пузырьков он вызывается.
Вы можете предотвратить это с помощью event.stopPropgation() . Ниже приведены два фрагмента, чтобы увидеть разницу.

Нерабочий

 document.querySelector('button').addEventListener('click',(e)=>{
  document.addEventListener('click',()=>console.log("body clicked"));
  console.log("button clicked")
})  
 <body>
<button>Test</button>
</body>

Примечание: Приведенный выше нерабочий пример также добавляет события множественного нажатия при каждом нажатии на Test

Работает

 document.querySelector('button').addEventListener('click',(e)=>{
  e.stopPropagation();
  document.addEventListener('click',()=>console.log("body clicked"));
  console.log("button clicked")
})  
 <body>
<button>Test</button>
</body>