JavaScript，MutationObserver 错过了突变

编程问答 2022-05-30

问题描述

我正在尝试为 Chess.com 网站创建用户脚本。我需要检测页面上某些元素的 class 属性的变化。

有一个小问题：观察者遗漏了类属性的某些变化。

我的问题简而言之：从 MutationObserver 的一般概念点（至少），有没有人有任何想法，这可能是什么原因？

更详细的问题：

我会在下面发布脚本，以防有人想尝试，但行为是这样的：

  • 我将一个观察者附加到一个黑骑士（我为黑色玩），无论哪个在 DOM 中先出现，当我在它上面 pointerdown 时，它被添加了一个“拖动”类。观察到一个变化，这是正常的。

chess-board

  • 然后我释放指针，类属性似乎没有发生变化，没有观察者调用。

  • 然后我再次pointerdown在骑士图块上，从中删除“选择”（而不是移动），这就是我所看到的（这一步用红色标记）：>

mutations-log

一个包含 3 个 MutationRecords 的数组被传递给观察者回调：

  • 在第一条记录中，我们看到旧值与步骤 1 中的当前值相同（未标记为红色）（这是正常和预期的）；
  • 在第二条记录（更改 2）中，我们看到旧值是 piece bn dragging，而前一条记录（标记块中的更改 1）的当前值是 piece bn square-28。 这意味着在 'square-28' 类已被删除和 'dragging' 类之间的某处已添加，并且没有报告对此的突变记录。第 3 步存在同样的问题。立>

一些额外的想法：

  • 我试图在另一个虚拟页面上重现这种情况，但我失败了，总是报告更改（即使它们实际上没有发生，例如删除不存在的类时{{1 }}).

  • Firefox 和 Chrome 都具有相同的行为，因此看起来不是错误

  • 不能在其他地方调用 elem.classList.remove('unexisting-class')，因为在这种情况下，队列将完全为空，并且不会出现更改 1。显然，更改队列不是空的，但一些必须存在的更改却没有。

  • 它不能是一个被覆盖的 observer.takeRecords()，因为它似乎包含 [native Code]，脚本中没有它的定义。

脚本是：

MutationObserver

我不知道为什么会这样，如果有人指出原因，我将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

domjavascriptmutation-observerstampermonkeyuserscripts