removeEventListener无法正常工作

Question

我不知道我做错了什么，但这里有一个我正在做的例子，它似乎不起作用。

someDom.addEventListener('mousemove',function(ev) {self.onInputMove(ev)},false);

someDom.removeEventListener('mousemove',self.onInputMove);

removeEventListener的代码已执行，但它并没有移除'mousemove'监听器。

- fogy

Answer 1

removeEventListener会移除与添加的函数完全匹配的侦听器。

在这种情况下，addEventListener 添加的函数是：

var some_func = function(ev) {
    self.onInputMove(ev);
};

存储一个对实际函数的引用，就可以解决问题。例如，以下代码应该可以工作：

someDom.addEventListener('mousemove',self.onInputMove,false);

someDom.removeEventListener('mousemove',self.onInputMove,false);

- Sean Vieira

---

removeEventListener的第三个参数也是必须的，所以你的例子应该是：someDom.removeEventListener('mousemove', self.onInputMove, false); - meouw

我知道我晚了几年，但第三个参数实际上不是必须的，对吧？我认为它应该是可选的，并且默认值为false。 - Michael Martin-Smucker

曾经是必须的，但现在不再是了。我会保留它以确保清晰度，但你说得对。 - Sean Vieira

请解释removeEventListener中的第三个参数是什么？我需要在addEventListener中使用true作为第三个参数，这样我就可以防止默认的鼠标点击（打开链接），因此我不能将其设置为false。 - user924

如果您在add和removeEventListener中都使用true，它将起作用 - 潜在问题是添加的函数必须与被删除的函数完全相同。 - Sean Vieira

Answer 2

onInputMove不是事件回调方法，因此您需要执行以下操作：

var event = function(ev) {self.onInputMove(ev)};
someDom.addEventListener('mousemove', event,false);

someDom.removeEventListener('mousemove', event, false);

- cem

---

removeEventListener 的第三个参数也是必须的，因此您的示例应为：someDom.removeEventListener('mousemove', event, false);。 - meouw

“event”不是你事件处理函数引用的好名称。 - UpTheCreek

Answer 3

为什么要自己费力呢，只需使用以下代码将事件绑定到元素即可：

element.onmousemove = function(e) {
    // Some code here...
    alert("Mouse moved!");
};

现在，如果您想删除该事件只需执行以下操作：

element.onmousemove = null;

完成了！

希望这能帮助你们！

- Steffen Brem

---

这个应该被标记为答案。亲爱的先生，祝您愉快的一天。您刚刚救了我一命。 - thandasoru

如果您正在使用事件监听器，那么@thandasoru所说的就不成立。 - Sir

因为这使用了旧的事件处理程序作为属性范例，而不是DOM Level 2事件标准。此外，这种技术不允许一个事件有多个处理程序。 - Scott Marcus

此外，它不允许您指定捕获或冒泡等其他选项。 - Manngo

Answer 4

这个问题在谷歌搜索中排名第一。除了已经提到的答案之外，这里还有一个有趣的事实值得注意:

如果在addEventListener()中忽略第三个可选变量useCapture/useBubble（因为它默认为false），在使用相同的回调名称删除相同的事件监听器时会创建一些问题。我在使用Chrome时遇到了这个问题。其他浏览器不确定。

所以要明确地将第三个变量命名为"false"。

- daksh_019