contentEditable 仅在单击元素时为 false答案

【问题标题】：contentEditable is false only when clicked on the elementcontentEditable 仅在单击元素时为 false
【发布时间】：2022-01-11 21:10:30
【问题描述】：

我有一个 div，里面有一些元素。我想要实现的是，当用户双击 div 内的元素时，它将自身设置为contentEditable。例如：如果用户双击 p 标签，它就会变成可编辑的，只要他点击标签外的任何地方，它就会将 contentEditable 设置为 false

但是发生的情况是，当我双击 p 标记时，它确实变得可编辑，但是当我单击该元素之外的任何位置时，它不会将自身设置为 false，并且只会在我单击时将自身设置为 false再次使用相同的p 标签。这很奇怪。我在这里做错了什么？

这是我的代码：

<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 arr = [];
    let myiframe = document.getElementById("zzz");

    myiframe.addEventListener("click", function (e) {
      obj = e.target;
      arr.push(obj);
      console.log(arr);

      if (arr.length > 2) {
        arr.shift();
      }
      if (arr[0] == arr[1]) {
        console.log("same");
      } else {
        console.log("different");
        obj.contentEditable = "false";
      }
      if (event.detail === 2) {
        obj.contentEditable = "true";
        obj.focus();
      }
    });
  </script>
</html>

【问题讨论】：

仅供参考 - 您永远不会验证节点类型。使<button> 元素可编辑没有任何意义。此外，您所拥有的一切都很好，但习惯上从所有元素（比如所有 <div> 子元素）中删除不需要的 feature 并将 feature 分配给唯一的元素.这意味着您不必存储“点击”元素的缓存，您只需要验证点击是正确的节点类型，然后分配属性。这将使这一切变得更容易（并且缩短了大约 15 行。）

标签： javascript contenteditable

【解决方案1】：

我认为你只需要在内存中存储一个元素，这是最后一个可编辑的元素。我使用了.setAttribute 并让它工作了

let arr = [];
let myiframe = document.getElementById("zzz");
let activeElement = null
myiframe.addEventListener("click", function(e) {
  obj = e.target;
  //console.log(activeElement)
  if (activeElement && activeElement !== obj) {
    activeElement.setAttribute('contenteditable', 'false');
  }
  if (event.detail === 2) {
    obj.setAttribute('contenteditable', 'true');
    activeElement = obj
    obj.focus();
  }
});

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

【讨论】：

【解决方案2】：

如果您将obj.contentEditable = "false"; 更改为arr[0].contentEditable = "false"，那么在单击时它会检查元素是否匹配，如果不匹配则会禁用元素属性。

【讨论】：

【解决方案3】：

e.target 是您单击的元素，因此当您单击一个元素并修改 obj.contentEditable 时，您只会修改该元素的 contentEditable 属性。

【讨论】：