如何在Javascript中从元素中删除点击事件？

Question

我有一个<div>元素，使用以下代码附加了一个点击事件：

var id = "someId";
var elem = document.getElementById("elemId");
elem.addEventListener("click", function() { someFunction(id); }, false);

稍后我会复制这个元素并将其添加到DOM的另一个部分，但需要先删除click事件。

var elem = document.getElementById("elemId");
elem.removeEventListener("click", ???? , false);

我不确定如何引用监听器，迄今为止我尝试过的任何方法都没有将事件从元素中删除。

有什么想法吗？

- Stewart Alan

Answer 1

将匿名的点击处理函数从addEventListener调用中移出：

var id = "someId";
var elem = document.getElementById("elemId");
var elemEventHandler = function() { someFunction(id); };
elem.addEventListener("click", elemEventHandler , false);

之后，您应该能够：

var elem = document.getElementById("elemId");
elem.removeEventListener("click", elemEventHandler , false);

- KooiInc

---

这个问题的难点在于DOM中可能会有多个具有此EventListener的元素，每个元素都有自己的id值。因此，我无法创建一个单一的全局elemEventHandler变量。添加事件监听器的代码是在其自己的函数中进行的，该函数将id作为参数传递进去。我该如何解决这个问题？ - Stewart Alan

@Stewart。完全可以为多个元素引用相同的处理程序，并删除其中一个元素的引用。我在jsfiddle中制作了一个示例来演示：http://jsfiddle.net/KooiInc/qQv9K/ - 顺便说一下，您还可以看到如何检索所单击元素的ID - KooiInc

@Koolinc - 谢谢。看起来不错，我试了一下，还有一些问题，但稍后会花更多时间来解决，并在帖子中更新。 - Stewart Alan

@Stewart：很高兴我能帮到你。我已经添加了一个替代jsfiddle的方法，其中处理程序作为属性添加到元素本身。这样，您可以针对每个元素使用参数化处理程序函数。 - KooiInc

@Koolinc - 谢谢！参数化处理程序非常有效，但当我在IE8中使用时会出现问题！您有什么想法可以让它能够跨浏览器兼容吗？仅仅是使用attachEvent而不是addEventListener并没有使事件附加到元素上。 - Stewart Alan

好的，我已经通过检查浏览器是否支持addEventListener/removeEventListener来使它在IE8-和当前浏览器中运行，并且如果不支持，则使用attachEvent/detachEvent。这在IE8中使用attachEvent有效，所以基于你的示例，elem.attachEvent('onclick', elem.clickHandler)很好用。但是我无法使用elem.detatchEvent('onclick', elem.clickHandler || clickHandler)来解除事件。 - Stewart Alan

Answer 2

上面的答案是正确的。 然而，如果有人想要删除一个像这样的按钮上附加的 onclick 函数：

<button type="button" onclick="submit()" id="tour-edit-save">Save</button>

在这种情况下，要删除附加的onclick函数，必须删除onclick属性，这将完美地起作用。 以下是使用纯粹的JavaScript来移除属性的方法。

document.getElementById('tour-edit-save').removeAttribute('onclick');

使用jquery

$('#tour-edit-save').removeAttr('onclick');

希望这能帮助正在寻找答案的人。

- Koushik Das