双击div内元素开启contentEditable后点击外部无法关闭怎么办

• 事件监听范围仅绑定在#zzz容器上，点击容器外区域无法触发监听逻辑，自然无法执行退出编辑的代码
• 退出编辑的逻辑错误：你判断两次点击元素不同时，将当前点击的新元素的contentEditable设为false，但你需要操作的是之前处于编辑状态的旧元素
• 用数组存储两次点击元素的逻辑无法覆盖“点击任意外部区域退出”的需求，缺少专门存储当前编辑元素的变量
• 未声明obj变量，会隐式成为全局变量，易引发未知问题

<html>
  <body>
    <div id="zzz">
      <h1>Welcome</h1>
      <p>this is the text</p>
      <button>click me</button>
      <u>yo</u>
    </div>
  </body>

  <script>
    // 存储当前处于编辑状态的元素
    let editingEl = null;
    const container = document.getElementById("zzz");

    // 监听容器内双击事件，进入编辑状态
    container.addEventListener("dblclick", function (e) {
      const target = e.target;
      // 先退出之前的编辑状态
      if (editingEl) {
        editingEl.contentEditable = "false";
      }
      // 配置当前元素为编辑状态
      editingEl = target;
      editingEl.contentEditable = "true";
      editingEl.focus();
      // 阻止冒泡避免触发全局点击的退出逻辑
      e.stopPropagation();
    });

    // 全局点击事件，判断是否退出编辑
    document.addEventListener("click", function (e) {
      if (!editingEl) return;
      // 校验点击位置是否在编辑元素内部
      const isClickInside = editingEl.contains(e.target);
      if (!isClickInside) {
        editingEl.contentEditable = "false";
        editingEl = null;
      }
    });
  </script>
</html>

• 给document绑定全局点击事件，覆盖所有点击场景
• 单独用editingEl变量存储当前正在编辑的元素，避免多余的数组操作
• 双击元素时先清空之前的编辑状态，再给当前元素开启编辑，避免同时存在多个可编辑元素
• 全局点击时通过contains方法判断点击位置，只要点击不在当前编辑元素内部就自动退出编辑

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