仅当单击元素时 contentEditable 为 false

Question

我有一个 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>

Answer 1

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

Answer 2

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

Answer 3

我认为你只需要在内存中存储一个元素，也就是最后一个可编辑的元素。我使用了 .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>

仅当单击元素时 contentEditable 为 false

contentEditable is false only when clicked on the element

javascript

contenteditable