Why Isn\'t My JavaScript removeEventListener Working?

Javascript removeEventListener Not Working

When attempting to add and remove event listeners to an element in Javascript, the removeEventListener function may not work as expected. This issue arises when the anonymous function provided as the second argument to removeEventListener is not the same function reference that was originally assigned to the addEventListener.

Understanding the Issue

In the provided code, the event listeners are attached and removed using anonymous functions:

area.addEventListener('click', function(event) { ... }, true);
area.removeEventListener('click', function(event) { ... }, true);

However, these anonymous functions are completely different objects. Even though they may perform the same tasks, they are not the same reference.

Solution

To correctly remove an event listener, you must provide the same function reference that was used to add the listener. Define a named function outside the addEventListener and removeEventListener calls:

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

By doing this, the removeEventListener function recognizes the function reference that was initially attached and successfully detaches the event listener.

The above is the detailed content of Why Isn't My JavaScript removeEventListener Working?. For more information, please follow other related articles on the PHP Chinese website!