如何删除EventListener？

-2

我正在为Canvas for Windows 10开发一个nodeJS游戏。所以我用画布绘制了一个按钮。要使按钮有效，我在整个画布元素上都有一个 EventListener，并检查当前的客户端鼠标位置。如何删除EventListener？

E.g

var obj = this; 
canvas.addEventListener("click", function (e) { // Handle Click on Canvas 
    obj.clickEvent(e); 
});

当我想删除按钮我叫this.del()

del() { 
    this.display = false; 
    var obj = this; 
    canvas.removeEventListener("click", function (e) {obj.clickEvent(e);}); 
    delete this; 
    notification(2, "deletet" + this.text); 
}

我使用obj淡然this的事件监听内将无法正常工作。

obj.clickEvent(e)只是比较鼠标位置的坐标与按钮的坐标。这工作正常。

任何可以获得该工作的建议或想法？
我尝试了一些解决方法，但目前无法处理它。

的第一次尝试：

class Button { 
    constructor(container, func, x, y, w, h, bg_color = "#F18F26", text, font_size = 16, font_color = "#FFF", display = true) { 
     ... // store parameters in this 
     var obj = this; 
     this.eventListener = canvas.addEventListener("click", function (e) {   // Handle Click on Canvas 
      obj.clickEvent(e); 
     }); 
     if (container !== false) 
      container.addCtx(this); 
    } 

    clickEvent(e) { 
     if ((e.clientX >= this.x - (this.w/2)) && (e.clientX <= this.x + (this.w/2)) && (e.clientY >= this.y - (this.h/2)) && (e.clientY <= this.y + (this.h/2))) { 

      //notification(1, "Glückwunsch"); 
      _start.hide(); 
      _game_over.hide(); 
      switch (this.func) { 
       ... // fires function 
      } 
     } 
     this.del(); 
    } 

    draw() { 
     ... // draws the button 
    } 

    del() { 
     this.display = false; 
     var handler = this.eventListener; 
     canvas.removeEventListener("click", handler); 
     delete this; 
     notification(2, "deleted" + this.text); 
    } 
}

来源

2017-08-02 DOCTYPE HTML

你应该使用lambda而不是存储'this'。 – SLaks

编辑

在你的构造：

this.eventListener = this.clickEvent.bind(this); 
canvas.addEventListener('click',this.eventListener);

在你del：

canvas.removeEventListener('click',this.eventListener); 
this.eventListener = null;

此外，这是没用的，做delete this你del方法里面，一个实例C注释删除自己。你所能做的就是让实例有资格进行垃圾回收，方法是确保没有其他东西保存对实例的引用。

ORIGINAL

你需要保持到处理程序的引用：

var obj = this; 
var handler = obj.clickEvent.bind(obj); 

canvas.addEventListener('click',handler);

...后来

canvas.removeEventListener('click',handler);

检查MDN为removeEventListener文档

来源

2017-08-02 18:44:28 Adam

好吧，看起来很简单，我会尝试 –

全部回答的Downvotes（这些都是相同的答案）让我感到惊讶，我的意思是，有592k代表的人得到了downvoted？请记住'handler'的范围，以便在'del'方法中可以访问它。 – Adam

投了所有答案备份，请观看我的编辑。该变量似乎为null或未定义，其中存储处理程序。 –

要删除的是不同的函数，它无关，与你实际添加的监听器。

您需要将实际的原始侦听器存储在某个变量中，以便稍后将其删除。

来源

2017-08-02 18:43:51 SLaks

投诉所有答案备份，请观看我的编辑。该变量似乎为null或未定义，其中存储处理程序。 –

@DOCTYPEHTML：这是因为'canvas.addEventListener'实际上并没有返回任何东西。您需要存储处理程序本身。 – SLaks

您必须删除相同的侦听器对象，在这种情况下是相同的功能。

window.addEventListener('click', windowClickEvent); 

function windowClickEvent(e) { 
    // ... 
}

这里windowClickEvent函数被绑定到一个click事件。要删除监听器，您必须通过与绑定的函数相同的函数。

window.removeEventListener('click', windowClickEvent);

来源

2017-08-02 18:44:17

如何删除EventListener？

回答

相关问题