Removeeventlistener javascript не работает

Javascript removeEventListener не работает

у меня есть следующий код для добавления eventListener

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

но даже слушатель не удаляется..Почему это происходит?Есть ли проблемы с моим removeEventListener ()? Примечание: здесь область что-то вроде документа.getElementById (‘myId’)

7 ответов

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

вы создаете две разные функции в обоих вызовов. Таким образом, вторая функция никак не связана с первой, и двигатель может удалить функцию. Вместо этого используйте общий идентификатор функции.

позже вы можете удалить обработчик вызова

Я считаю, что для объекта windows требуется последний параметр «true». Удаление не работает, если нет флага захвата.

сначала определите обработчик событий,

чтобы удалить его, сохраните функцию в переменной или просто используйте именованную функцию и передайте эту функцию в removeEventListener звоните:

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

тогда у вас есть то, что вам нужно удалить, когда waitExecute называемый.

я столкнулся с проблемой removeEventListener (), которая нуждается в объяснении.

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

полный файл библиотеки выглядит следующим образом:

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

тестовая страница HTML выглядит следующим образом:

для полноты я также использую следующий простой файл CSS:

код теста следующим образом:

Итак, тест должен быть выполнен следующим образом:

[1] прикрепите обработчик событий click к кнопке #1;

[2] Проверьте, вызывается ли обработчик событий при нажатии на кнопку;

[3] Как только этот тест пройдя, нажмите кнопку #2 и вызовите прикрепленный к ней обработчик событий, который удаляет старый обработчик событий, прикрепленный к кнопке #1, а затем заменяет его новым обработчиком событий.

шаги [1] и [2] работают нормально. Обработчик событий прикреплен и вызывается всякий раз, когда я нажимаю на кнопку.

проблема с шагом [3].

хотя я сохраняю ссылку на функцию, сгенерированную MakeEventHandler (), специально для удаления этого события прослушиватель на Шаге [3] вызов removeEventListener() не удаляет прослушиватель событий. Последующее нажатие на кнопку #1 запускает оба прослушивателя событий, включая тот, который я предположительно удалил!

Излишне говорить, что это поведение я нахожу озадачивающим, несмотря на тщательную настройку всего так, что функция, которую я указываю в вызове removeEventListener (), является той же самой функцией, которую я добавил изначально с addEventListener () — согласно все документация на тема, которую я прочитал (включая этот поток), передавая ссылку на одну и ту же функцию для каждого вызова должны работает, но явно не работает.

на Шаге [1] тестовый вывод в консоли читает, как и ожидалось:

кнопка 1 инициал обработчик событий срабатывает

код также запускается, как и ожидалось, в шаге [2], и пошаговая трассировка кода показывает, что действительно код выполняется так, как ожидалось.

но в шаге [3], в то время как первый нажмите на кнопку #1 дает желаемый результат:

кнопка 1 конечный обработчик событий срабатывает

что происходит, когда кнопка #1 нажата на впоследствии это:

кнопка 1 инициал обработчик событий срабатывает Кнопка 1 финальный обработчик события

конечно, даже если функция, первоначально прикрепленная к кнопке #1, все еще сохраняется в памяти, потому что он был создан в закрытии, он все равно должен быть отделен от коллекции прослушивателя событий для элемента? Почему он все еще связан?

или я столкнулся с какой-то странной ошибкой, связанной с использованием замыканий со слушателями событий, о которых нужно сообщить?

Источник

Почему removeEventListener не срабатывает для всех элементов?

Всем привет, обнаружил проблему с обработчиками событий..

Есть элементы, повесил на них обработчик..
Потом что-то случилось и добавил ещё элементов в список.

О новых элементах ничего не знаю, знаю что у всех этих элементов одинаковый класс.

Весим обработчик на все элементы с указанным классом, и тут проблема 🙂
На тех элементах которые были до того, как появились новые теперь 2 одинаковых обработчика.

как удалить старые обработчики и добавить новый?

Когда добавляются новые элементы делаю так(знаю что это бред):

Но не срабатывает и по прежднему 2 обработчика, в чем может быть причина, подскажите пожалуйста?
мб в том что я передаю this ?

Буду очень благодарен

• Вопрос задан более трёх лет назад
• 962 просмотра

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

UPD по комментарию

Я бы удивился, если бы помог, т.к. document в иерархии всплытия события, будет стоять последним в очереди. Я в принципе вам предлагал использовать делегирование, т.е. один обработчик клика на весь документ. В вашем случае, проблему можно решить, установив обработчик на ближайший родительский статичный элемент, а не на весь документ. И, если присутствуют еще какие-то родительские элементы, на которых так же установлен клик, то делать проверку внутри их обработчика. Вариант 1, Вариант 2.
А что касается предложенного мной вариант с установкой одного обработчика, то могу показать, как я это реализовывал в некоторых проектах, может пригодится в будущем . или настоящем 🙂
Пример в песочнице При добавлении нового элемента, я только дописываю ему в data-атрибут метод, который должен быть вызван при клике и описываю сам метод в объекте «methods»

Источник

Javascript removeEventListener not working

I have the following code to add eventListener

It is working correctly as expected..Later in another function i tried to remove the event listener using the following code

But the even listener is not removed..Why is it happening?Is there any problem with my removeEventListener()? Note:Here area is something like document.getElementById(‘myId’)

11 Answers 11

This is because that two anonymous functions are completely different functions. Your removeEventListener ‘s argument is not a reference to the function object that was previously attached.

I find that for the windows object, the last param «true» is required. The remove doesn’t work if there is no capture flag.

You are creating two different functions in both calls. So the second function does not relate in any way to the first one and the engine is able to remove the function. Use a common identifier for the function instead.

later you can then remove the handler by calling

In a React function component, make sure to define the callback with the useCallback(() => <> hook. If you fail to do this, the callback will be a different one on every re-render and the removeEventListener method will not work.

To remove it, store the function in a variable or simply use a named function and pass that function to the removeEventListener call:

If you want to pass local variables to the function called by the event listener, you can define the function inside the function (to get the local variables) and pass the name of the function in the function itself. For example, let’s start inside the function that adds the event listener with app as a local variable. You would write a function inside this function such as,

Then you have what you need to remove it when waitExecute is called.

define your Event Handler first,

I’ve encountered a problem with removeEventListener() that needs explaining.

I wanted to be able to pass parameters to event listeners, so I wrote a function to generate the event listener, that in turn returns a second function, which calls my intended event listener as a callback.

The complete library file is as follows:

Then I wrote a quick test page to find out if this worked as intended, and allowed me to add AND remove event handlers at will.

The HTML test page is as follows:

For completeness, I use the following simple CSS file as well:

The test code is as follows:

So, the test to be performed is as follows:

[1] Attach a click event handler to Button #1;

[2] Test to see if the event handler is invoked when I click on the button;

[3] Once that test is passed, click on Button #2, and invoke the event handler attached thereto, which removes the old event handler attached to Button #1, then replaces it with a new event handler.

Steps [1] and [2] work fine. The event handler is attached, and invoked whenever I click upon the button.

The problem is with Step [3].

Even though I save a reference to the function generated by MakeEventHandler(), specifically for the purpose of removing that event listener in Step [3], the call to removeEventListener() does NOT remove the event listener. Subsequent clicking on Button #1 fires BOTH event listeners, including the one I supposedly removed!

Needless to say, this behaviour I find puzzling, despite carefully setting everything up so that the function I specify in the call to removeEventListener() is the self same function I added initially with addEventListener() — according to all the documentation on the subject I’ve read (including this thread), passing a reference to the same function for each call should work, but clearly doesn’t.

At Step [1], the test output in the console reads, as expected:

Button 1 initial event handler triggered

The code is also run, as expected, in Step [2], and a step by step trace of the code reveals that indeed, the code is executed as expected.

But in Step [3], whilst the first click on Button #1 yields the desired result:

Button 1 final event handler triggered

what happens when Button #1 is clicked upon subsequently is this:

Button 1 initial event handler triggered Button 1 final event handler triggered

Surely, even if the function initially attached to Button #1 still persists in memory, because it was generated within a closure, it should still be detached from the event listener collection for the element? Why is it still connected?

Or have I encountered some weird bug involving using closures with event listeners, that needs to be reported?

Источник

Не удаляется функция обработчик с помощью removeEventListener

Пробую переписать часть функционала в качестве модулей и столкнулся с проблемой, что не могу с кнопки searchBtn удалить с помощью removeEventListener функцию обработчик openSearchInput .

Ранее код выглядел таким образом и все работало:

2 ответа 2

addEventListener() и removeEventListener() должны ссылаться на одну и ту же функцию, но bind() создаёт и возвращает новую функцию, не тождественную той, что вы пытаетесь удалить. Попробуйте, например, так:

Решил следующим образом

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript frontend или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.15.40479

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

removeEventListener не работает должным образом

В моем приложении Vue есть довольно простой компонент. Когда пользователь открывает меню, я добавляю прослушиватель событий к элементу #app для обнаружения «внешних» щелчков.

Когда пользователь щелкает наружу, он закрывает меню и удаляет прослушиватель событий. Это работает, как ожидалось. Проблема в том, что когда пользователь нажимает кнопку, чтобы открыть меню, а затем щелкает ее снова, чтобы закрыть его, я также хотел бы removeEventListener , потому что меню теперь закрыто.

Однако это не работает. Когда я открываю меню с помощью кнопки, а затем закрываю его с помощью кнопки, прослушиватель событий остается на элементе #app , даже если я его удаляю.

Если вы нажмете кнопку несколько раз, а затем щелкните за пределами кнопки, когда отображается значение true , вы увидите журнал консоли outside click несколько раз.

2 ответа

Проблема в том, что каждый раз click вы создаете новую clickOutside функцию; если вы используете эту функцию с removeEventListener , поскольку нет регистрации события с этим точным объектом функции, ничего не удаляется.

Вместо этого запомните объект-обработчик, чтобы вы могли использовать его для удаления, см. Примечания:

Боковое примечание: более идиоматично использовать

. вместо сравнения логического значения с true или false с === . У вас уже есть логическое значение, так что . я имею в виду, где вы остановитесь? if ((this.menuVisible) === true === true) ? 🙂

Мне это кажется проблемой XY. В идеале вы не должны динамически привязывать / откреплять прослушиватели событий в JS (или даже VueJS). Если вам просто нужно следующее поведение:

• Нажатие кнопки переключает меню
• Нажмите на приложение за пределами кнопки, чтобы закрыть меню

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

Не забудьте использовать .stop в связывателе событий @click на кнопке, чтобы вы могли остановить всплытие события клика VueJS в приложение.

Источник