主页 / 问题 / 1130942
Accepted
Leks
Asked:2020-05-25 05:46:24 +0000 UTC2020-05-25 05:46:24 +0000 UTC

为什么代码会在观察者中抛出错误

  • 772

示例代码来自哪里

let observer = new MutationObserver(mutationRecords => {
  console.log(mutationRecords);
});

mutationRecords = [{
  type: "childList",
  target: <div#elem>,
  removedNodes: [<b>],
  nextSibling: <text node>,
  previousSibling: <text node>
  // другие свойства пусты
}, {
  type: "characterData"
  target: <text node>
  // ...детали изменений зависят от того, как браузер обрабатывает такое удаление
  // он может соединить два соседних текстовых узла "Отредактируй " и ", пожалуйста" в один узел
  // или может оставить их разными текстовыми узлами
}];
<div contentEditable id="elem">Отредактируй <b>меня</b>, пожалуйста</div>
为什么 console.log 会抛出错误？

javascript

2 个回答

  1. Best Answer

    嗯...因为没有魔法，它只是一个具有内置功能的常规 JS 对象。console.log 中不会出现该错误。这里：

    mutationRecords = [{
  type: "childList",
  target: <div#elem>,
  removedNodes: [<b>],
  nextSibling: <text node>,
  previousSibling: <text node>
}]

    您正在创建一个全局变量mutationRecords并尝试为其分配一个普通数组，<div#elem>当然，其中 JS 是无效的字符集。

    链接中的示例写得不是很清楚。这是他们的示例输出，而不是您应该在代码中编写的内容。

    它应该是这样的：

    let observer = new MutationObserver(mutationRecords => {
  console.log(mutationRecords);
});

observer.observe(elem, {
  childList: true,
  subtree: true,
  characterDataOldValue: true
});
    <div contentEditable id="elem">Отредактируй <b>меня</b>, пожалуйста</div>

    如果您查看浏览器开发人员工具中的输出，它将与您的问题完全相同。

    • 2

  2. console.log不抛出错误：

    let observer = new MutationObserver(mutationRecords => {
  console.log(mutationRecords);
});
const config = { attributes: true, childList: true, subtree: true };
observer.observe(document.getElementById("elem"), config);
/*
mutationRecords = [{
  type: "childList",
  target: <div#elem>,
  removedNodes: [<b>],
  nextSibling: <text node>,
  previousSibling: <text node>
  // другие свойства пусты
}, {
  type: "characterData"
  target: <text node>
  // ...детали изменений зависят от того, как браузер обрабатывает такое удаление
  // он может соединить два соседних текстовых узла "Отредактируй " и ", пожалуйста" в один узел
  // или может оставить их разными текстовыми узлами
}];
*/
    <div contentEditable id="elem">Отредактируй <b>меня</b>, пожалуйста</div>

    • 2

相关问题