Question

我正在尝试使用MutationObserver创建一个迷你库来检测DOM中的更改，同时还要回退到旧版浏览器中的基本Mutation事件。到目前为止一切都很好，它在Chrome和Firefox中运行正常，我也测试了这些浏览器的后备 - 一切正常但是当我测试IE 10时它表现不同（多么出乎意料......）

在此库中，您只需致电：

domWatch(someDOMNode, callback)

回调获取一个参数 - 一个带断开连接的观察者＆amp;观察方法，以便在对节点进行一些更改时停止观看节点，然后再开始观看。

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/

（Full library Fiddle：http://jsfiddle.net/x6W3p/）

感谢您的帮助！

Answer 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更改它是否会起作用。

removeEventListener无法在IE10中运行，适用于Chrome

1 个答案: