如何检测“Clickoutside” JavaScript 中的事件？

Question

我是 JavaScript 新手。我试图编写一个代码，将头文件转换为可编辑列表，一旦您单击外侧，输入将被保存为列表项的内部文本，而输入值将存储在网络的本地存储中地点。到目前为止，我已经编写了下面的代码并尝试了“模糊”事件，但它仅适用于单个列表输入项。

console.log("This is exercise 2");

let element = document.createElement("div");
element.setAttribute("id", "mydiv");
element.innerHTML = `
    <ul style="border: 2px solid black; margin: 5px">
        <li class="listItem">I am Item 1</li>
        <li class="listItem">I am Item 2</li>
        <li class="listItem">I am Item 3</li>
        <li class="listItem">I am Item 4</li>        
    </ul>
`;


document.querySelector("h2").appendChild(element);

let parent = document.getElementById("mydiv");
parent.addEventListener("click", myfunc);

function myfunc(e)
{
    var child = document.getElementsByClassName("listItem");
    if (document.getElementsByClassName("inputItems").length==0){
    Array.from(child).forEach(function(element){
        element.innerHTML = `
            <input type="text" class="inputItems" placeholder="Edit Me" style="border: 2px solid black">
        `;
    });
    }
}
parent.addEventListener("blur", function(){
    let listitems = Array.from(document.getElementsByClassName("listItem"));
    let items = Array.from(document.getElementsByClassName("inputItems"));
    for(let i=0; i<listitems.length; i++){
        
        listitems[i].innerHTML = items[i].value;
        localStorage.setItem(`text ${i+1}`, items[i].value);
    }
},
true);

Answer 1

您可以将事件侦听器放在整个文档上，并使用 event.target 来检查单击是否在父元素之外。 event.target 是触发事件的元素。
这是我整理的：

console.log("This is exercise 2");

let element = document.createElement("div");
element.setAttribute("id", "mydiv");
element.innerHTML = `
    <ul style="border: 2px solid black; margin: 5px">
        <li class="listItem">I am Item 1</li>
        <li class="listItem">I am Item 2</li>
        <li class="listItem">I am Item 3</li>
        <li class="listItem">I am Item 4</li>        
    </ul>
`;


document.querySelector("h2").appendChild(element);

let parent = document.getElementById("mydiv");
document.addEventListener("click", myfunc);

function myfunc() {
  if(!parent.contains(event.target)) {
    toList();
    return;
  }
  if(document.getElementsByClassName("inputItems").length != 0)
    return;
  var child = document.getElementsByClassName("listItem");
  Array.from(child).forEach(function (element) {
    if(element == event.target)
      toInput();
    }
  );
  
}

function toInput() {
  var child = document.getElementsByClassName("listItem");
    Array.from(child).forEach(function(element){
        element.innerHTML = `
            <input type="text" class="inputItems" placeholder="Edit Me" style="border: 2px solid black">
        `;
    });
}

function toList() {
  var child = document.getElementsByClassName("listItem");
  Array.from(child).forEach(function(element) {
    element.innerHTML = element.getElementsByClassName("inputItems")[0].value;
  });
}

<h2></h2>