removeEventListener 在 IE10 中不起作用，在 Chrome 中起作用答案

【问题标题】：removeEventListener not working in IE10, works in ChromeremoveEventListener 在 IE10 中不起作用，在 Chrome 中起作用
【发布时间】：2014-09-02 14:53:54
【问题描述】：

我正在尝试使用MutationObserver 创建一个迷你库来检测 DOM 中的变化，同时也回退到旧浏览器中的基本突变事件。到目前为止一切顺利，它在 Chrome 和 Firefox 中都能正常工作，我也在这些浏览器中测试了后备 - 一切正常，但是当我测试 IE 10 时，它的行为有所不同（多么出乎意料......）

在这个库中你可以简单地调用：

domWatch(someDOMNode, callback)

回调获取一个参数 - 具有断开连接和观察方法的观察者，因此您可以在对节点进行一些更改时停止观察节点，然后再次开始观察。

domWatch(document.querySelector('div'), function (obs) {
    setTimeout(function () {
        obs.disconnect();
        $(obs.node).append('a');
        obs.observe();
    }, 1200);
});

在回退中，我使用突变事件并添加/删除事件侦听器。我认为问题在于，在 IE 中，事件并没有真正被删除，它陷入了无限循环（我的代码在 setTimeout 中，所以它不会让你的浏览器崩溃）。出于某种原因，它可能认为this.realCallback 是不同的功能？

FallbackObserver.prototype.observe = function () {
    this.node.addEventListener("DOMSubtreeModified", this.realCallback, true);
}

FallbackObserver.prototype.disconnect = function () {
    this.node.removeEventListener("DOMSubtreeModified", this.realCallback, true);
}

我只用有问题的代码创建了一个迷你小提琴，尝试在 Chrome 中运行它，然后在 IE10 中运行它：http://jsfiddle.net/Hb45w/2/

（全库小提琴：http://jsfiddle.net/x6W3p/）

【问题讨论】：

标签： javascript internet-explorer dom-events mutation-observers mutation-events

【解决方案1】：

设法解决它：

所有浏览器都正确删除和添加事件 - 问题是别的。

IE 的实际问题可能是渲染引擎的某些方面 - 我断开了事件处理程序，进行了更改并再次开始观察：

    obs.disconnect();
    $(obs.node).append('a');
    obs.observe();

问题在于事件显然是在 IE 完成渲染之前附加回来的（可能是一些异步执行）。

变化

FallbackObserver.prototype.observe = function () {
    this.node.addEventListener("DOMSubtreeModified", this.realCallback, true);
}

到

FallbackObserver.prototype.observe = function () {
    var that = this;
    setTimeout(function () {
       that.node.addEventListener("DOMSubtreeModified", that.realCallback, true);
    }, 0);
}

成功了。但是我不确定如果执行一些更复杂的 DOM 更改是否会起作用。

【讨论】：