点击元素监听文本变更时MutationObserver未触发，原因何在？

你的MutationObserver未触发，核心是配置参数不完整，导致无法捕获contenteditable元素的文本变化，另外还有变量声明的小问题，具体分析和修复如下：

1. 核心问题：缺少子树监听配置 #

当编辑contenteditable元素的文本时，实际发生变化的是元素内部的文本子节点（比如<h1>包裹的#text节点），而非元素本身的字符数据。原配置仅监听目标元素自身的属性和字符数据，未开启对子节点的监听，因此子节点的文本变更无法被捕获。

必须在配置中添加subtree: true，才能让Observer监听目标元素及其所有子节点的变化。

2. 次要问题：未声明局部变量 #

原代码中element未用let/const声明，会成为全局变量，可能引发意外的变量覆盖问题，建议改为局部变量。

修正后的代码 #

JavaScript #

document.addEventListener("click", function (e) {
    const element = e.target; // 声明局部变量，避免全局污染

    const config = {
      attributes: true,
      characterData: true,
      subtree: true, // 关键：开启子树监听，捕获子节点文本变化
    };

    const observer = new MutationObserver((mutationList) => {
      for (const mutation of mutationList) {
        console.log(mutation.type);
        // 可选：针对性处理文本变更
        if (mutation.type === 'characterData') {
          console.log('新文本内容:', mutation.target.textContent.trim());
        }
      }
    });

    observer.observe(element, config);
});

HTML #

<h1 contenteditable="true">Edit me</h1>

额外优化：避免重复绑定监听器 #

每次点击元素都会创建新的Observer实例，多次点击同一元素会叠加多个监听器，导致重复触发。可以给元素添加标记，避免重复绑定：

document.addEventListener("click", function (e) {
    const element = e.target;
    if (element.dataset.observed) return; // 已监听则直接返回
    element.dataset.observed = 'true'; // 添加已监听标记

    const config = {
      attributes: true,
      characterData: true,
      subtree: true,
    };

    const observer = new MutationObserver((mutationList) => {
      for (const mutation of mutationList) {
        console.log(mutation.type);
        if (mutation.type === 'characterData') {
          console.log('新文本内容:', mutation.target.textContent.trim());
        }
      }
    });

    observer.observe(element, config);
});

内容的提问来源于stack exchange，提问作者Abhay Salvi