MutationObserver 不工作

Question

考虑以下代码：

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.target.nodeName);
  });
});

observer.observe(document, {
  attributes: true,
  childList: true,
  characterData: true
});

<div>
  <ol contenteditable oninput="">
    <li>Press enter</li>
  </ol>
</div>

这是对this的轻微修改。

与 jsbin 版本页面交互不会产生任何日志。我哪里错了？请注意，如果我替换行

  observer.observe(document, {

与

  observer.observe(document.querySelector('ol'), {

脚本开始工作...

Answer 1

它似乎不起作用，因为你没有改变你所观察到的任何东西。你也没有改变

attributes: true
```
节点的
```
属性（
```
document
```
）（这是可以理解的，因为
```
document
```
没有属性）
子节点 (
```
childList: true
```
)：
```
document
```
的唯一子节点是
```
<html>
```
节点，并且您不会删除或替换它。
字符数据 (
```
characterData: true
```
)：您不会更改
```
document
```
的任何文本、注释或处理指令子项（也可以理解，因为
```
document
```
不能有这样的子项）。

如果替换

<html>

节点，您可以看到突变观察器按照配置工作。

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.target.nodeName);
  });
});

observer.observe(document, {
  attributes: true,
  childList: true,
  characterData: true
});

document.replaceChild(document.createElement('div'), document.documentElement);

您正在做的是更改

ol

元素的内容，该元素是 document 的

后代

。

如果你想听这些变化，你必须将

subtree

设置为 true：

observer.observe(document, {
  attributes: true,
  childList: true,
  subtree: true,
  characterData: true
});

更多信息请参见 MDN 文档。

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.target.nodeName);
  });
});

observer.observe(document, {
  attributes: true,
  childList: true,
  subtree: true,
  characterData: true
});

<div>
  <ol contenteditable oninput="">
    <li>Press enter</li>
  </ol>
</div>

Answer 2

对于任何使用 Chrome 并尝试过上述解决方案的人，请尝试重新启动 Chrome。

function callback() {
   console.log("mutation occured")
};
console.log("about to run")
const observer = new MutationObserver(callback);
observer.observe(document, { attributes: true, childList: true, subtree: true, characterData: true});

对于我来说，最基本的例子是，在我重新启动 Chrome 之前，用文档记录每个可能的更改，因为目标仍然不会触发回调。

Answer 3

关闭当前选项卡并在新选项卡中重新打开网址也可以解决问题。对于我的情况，我设置了一个断点，导致 chrome 干扰观察者

Answer 4

花了将近一个小时，直到我意识到你必须观察所需元素的父元素，而不是元素本身。

例如如果你有这样的事情：

const el = document.getElementById('my-observed-element');

你应该这样观察：

observer.observe(el.parentElement, { childList: true });

否则您将不会收到

el

本身的任何更改

MutationObserver 不工作

问题描述投票：0回答：4

4个回答

最新问题

MutationObserver 不工作

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4