«Если рабочий хочет хорошо выполнять свою работу, он должен сначала заточить свои инструменты» — Конфуций, «Аналитики Конфуция. Лу Лингун»
титульная страница > программирование > Почему `removeEventListener()` не работает в моем коде JavaScript?

Почему `removeEventListener()` не работает в моем коде JavaScript?

Опубликовано 12 ноября 2024 г.
Просматривать:609

Why Doesn\'t `removeEventListener()` Work in My JavaScript Code?

Проблема с удалением EventListener в JavaScript: почему происходит сбой удаленияEventListener()

В JavaScript прослушиватели событий позволяют разработчикам отслеживать события элементов DOM, такие как щелчки, движения мыши и многое другое более. Хотя прикрепить прослушиватель событий довольно просто, его удаление иногда может вызвать проблемы.

Код

Исходный код добавляет прослушиватель событий к элементу с именем area при нажатии на него.

area.addEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);

Проблема

Проблема возникает при попытке удалить прослушиватель событий позже в коде.

area.removeEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);

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

Решение

Причина этой проблемы заключается в том, как подключаются прослушиватели событий. Каждый отдельный экземпляр функции создает отдельный прослушиватель событий. В этом случае для добавления и удаления прослушивателя используются две анонимные функции.

Чтобы решить проблему, убедитесь, что ссылка на функцию, используемая для удаления, идентична той, которая использовалась для добавления прослушивателя.

function handleClickListener(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}

// Add event listener
area.addEventListener('click', handleClickListener, true);

// Remove event listener
area.removeEventListener('click', handleClickListener, true);

Используя одну и ту же ссылку на функцию для обеих операций, JavaScript может правильно удалить прослушиватель событий при вызове.

Последний учебник Более>

Изучайте китайский

Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.

Copyright© 2022 湘ICP备2022001581号-3