0

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

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

domWatch(someDOMNode, callback)

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/）

4

1 回答 1

0

设法解决它：

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

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 更改。

于 2014-07-12T00:28:08.553 回答