JavaScript removeEventListener 不起作用

Question

JavaScript removeEventListener 不起作用

128

我有以下代码来添加事件监听器

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

但是事件监听器并没有被移除...为什么会发生这种情况？我的removeEventListener()有问题吗？注意：这里的area类似于document.getElementById('myId')

- Jinu Joseph Daniel

可能是JavaScript：删除事件侦听器的重复问题。 - Heretic Monkey

15个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Epirocks · Answer 1

这是我的最终实现，但它是在路由类中的，不过并不会有太大的区别。我希望事件监听器在每次调用 afterModel() 后不会累加，但同时需要参数和作用域，以便每次更改模型。

export default class iFrameRoute extends Route {

      afterModel(model) {

           this.initFrame = function(event) {  
    
               alert("I am being called");

               window.removeEventListener("message",  this.route.test); 

           }.bind({route: this, data: model});

           window.addEventListener("message",  this.initFrame ); 
       } 
}

- manas · Answer 2

在React中，我们可以使用useRef()将我们的监听器函数存储在当前属性中。这样，在重新渲染和删除监听器的情况下，它将保持对该函数的相同引用。

const handleWindowClick = useRef(() => {
    console.log("window clicked");
  });



// for attaching event listener
 window.addEventListener("click", handleWindowClick.current);
 
 // for detaching event listener
 window.removeEventListener("click", handleWindowClick.current);

- Sumit Asagaonkar · Answer 3

在添加函数时，将其存储在数组中并通过映射删除对我有用

const [functionObjects, setfunctionObjects] = useState([]);

const addListener = (beforeUnloadListener) =>{ 
    setfunctionObjects([...nano, beforeUnloadListener]);
    addEventListener("beforeunload", beforeUnloadListener, {capture: true});
};

const removeListener = (beforeUnloadListener) => { 
    functionObjects.map((item) => {
    removeEventListener("beforeunload", item, {capture: true});});
};

- HariHaran · Answer 4

2023年更新

我正在使用Angular，尝试了很多次使用AbortController()，但是没有解决我的问题。
最终，renderer2挽救了我。以下是我所做的：

mouseMoveListener :any;
mouseUpListener :any;

this.mouseMoveListener = this._renderer.listen("document", "mousemove", (event) => {
        this.onMouseMove(event);
      });

this.mouseUpListener = this._renderer.listen("document", "mouseup", (event) => {
        this.onMouseUp(event);
});

ngOnDestroy(){
 this.mouseMoveListener();
 this.mouseUpListener();
}

- C Halsema · Answer 5

Angular 14 使用 AbortController()，当用户返回到组件时，我无法重新启动事件监听器。这对我很有用。

  @HostListener('window:message', ['$event'])
  onMessage(event) {
    this.receiveMessage(event);
  }

@HostListener在组件关闭时会自动销毁。