删除事件监听器

我有一个画布元素，我在其中使用WebGL绘制东西。
取决于我所添加的事件侦听器。删除事件监听器

现在，当我重绘画布时，我想删除旧的事件侦听器并添加一个新的侦听器。

简单地做，这将不起作用：

canvas.removeEventListener("click", function(event){ 
             colorbarClicked(event, viewdata); 
            }, false); 
canvas.addEventListener("click", function(event){ 
             colorbarClicked(event, viewdata); 
           }, false);

我认为这是因为colorbarClicked功能已经改变了（？也许是因为它的参数有不同的值），而不是匹配的旧的，我要删除任何更多。

所以我的问题是，每次我重绘事件侦听器得到添加，因此加倍。但colorbarClicked函数取决于在画布中绘制的内容，所以我肯定需要更改它。

来源

2014-10-29 phen

的可能重复的[JavaScript的：除去事件侦听器（http://stackoverflow.com/questions/4402287/javascript-remove-event-listener） – 2014-10-29 14:41:54

你需要记住你加入时所使用的功能，并再次相同功能使用拆卸时：

// Somewhere *outside* the code doing the adding/removing (in containing code) 
var listener = null; 

// In the code adding/removing 
if (listener) { 
    canvas.removeEventListener("click", listener, false); 
} 
listener = function(event){ colorbarClicked(event, viewdata); }; 
canvas.addEventListener("click", listener, false);

边注：添加和删除处理每一次似乎很尴尬。通常情况下，你只需要添加一次处理程序，然后让它响应你做出的任何更改。

来源

2014-10-29 14:42:36

由于，这工作得很好。 – phen 2014-10-29 14:59:44

您可以使用命名函数。以下面的例子：

function foo(){ 
 
    alert("this comes only once"); 
 
    this.removeEventListener('click', foo); 
 
} 
 
dude.addEventListener('click', foo);

<button id="dude">Click Me</button>

这到底是怎么发生的是，功能foo在全球范围内被定义。它有自己独特的身份。该功能的基本功能是创建一个警报，然后从按钮的click事件中移除。所以当你点击它时，监听器被删除，因此你不再看到它。

您的代码无法按预期工作，因为您作为回调传递给addEventListener的函数没有唯一标识，并且Javascript不知道要删除的内容。

这种方法还可以防止之类的东西回调地狱:)

来源

2014-10-29 14:42:49

删除事件监听器

回答

相关问题