Question

我有一个canvas元素，我在其中使用WebGL绘制一些东西根据绘制的内容，我添加了一个事件监听器。

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

简单地这样做是行不通的：

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

我认为这是因为colorbarClicked函数已经改变了（可能因为它的参数有不同的值？）而且不匹配我想要删除的旧版本。

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

Answer 1

您需要记住添加时使用的功能，并在删除时再次使用相同的功能：

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

附注：每次添加和删除处理程序似乎都很尴尬。通常情况下，您只想添加一次处理程序，并让它响应您所做的任何更改。

Answer 2

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

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不知道要删除的内容。

这种方法也可以防止像回调地狱这样的事情：）

删除事件侦听器

2 个答案: