当为父子元素使用单独的点击事件时，它会影响下一个元素答案

【问题标题】：when using separate click event for parent and child its effecting the next element当为父子元素使用单独的点击事件时，它会影响下一个元素
【发布时间】：2023-03-24 18:24:01
【问题描述】：

我有一个元素数组，我将它们显示为一个按钮，并且这些元素有一个关闭按钮。所以我使用 for each 来分配他们并给他们点击事件。所以这两个功能都有效。但是当我关闭一个元素时，会自动调用下一个元素。

function printAll() {
    data.innerHTML = '';
    allFile.forEach((a, i) => {
        data.innerHTML = ` ${data.innerHTML}  <div id="${allFile[i].id}" class = "btn" >${allFile[i].path} <span class="close">&times; </span> </div>`;
    });
    allFile.forEach((a, i) => {
        let temp = document.getElementById(allFile[i].id);
        temp.addEventListener('click', () => {
            open(allFile[i].path, allFile[i].type)

        });

    });
    allFile.forEach((a, i) => {

        let temp2 = document.getElementById(allFile[i].id).querySelector(".close");
        temp2.addEventListener('click', () => {
            close(i);
        });
    });
}

function close(is) {
    let aas = allFile.splice(is, 1);

    for (let i = 0; i < allFile.length; i++) {

        if (i > is - 1) {
            allFile[i].id--;

        }
    }
    allFile.forEach(a => console.log(a.id))
    allFile.forEach(a => console.log(a.path))
    window.setTimeout(() => {
        printAll();
    }, 600);
}

所以预期的输出是，当我关闭一个框/按钮时，它会移除，而其他元素只会出现而不调用下一个元素的点击事件。

但发生的情况是，当我关闭它时，它只是调用下一个元素的点击事件。

【问题讨论】：

标签： javascript

【解决方案1】：

您可以简化脚本并简化 HTML 标记的生成。以下是我对做你想做的事的看法：

const allFile=[{id:1, path:"first path"},
               {id:2, path:"second path"},
               {id:3, path:"third path"},
               {id:4, path:"fourth path"},
               {id:5, path:"fifth path"},
               {id:6, path:"sixth path"},
               {id:7, path:"seventh path"} ];
printAll(allFile,".show"); 


function printAll(allFile, where) {
 const cont=document.querySelector(where);
 cont.innerHTML = allFile.map(a=>`<div id="${a.id}" class = "btn" >${a.path}<span class="close">&times; </span> </div>`).join('\n');
 cont.onclick=ev=>{
   if (ev.target.className=="close"){ // a ".close" button was clicked ...
     let el=ev.target.parentNode      // this element should be removed
     el.style.display="none";         // make it invisible
     allFile.splice(allFile.map(e=>e.id).indexOf(+el.id),1); // remove array element
     console.log(allFile)             // show array
   }
 }
}

.btn {border: solid 1px grey; margin:6px}
.btn span {font-size:3ex; cursor:pointer}

&lt;div class="show"&gt;&lt;/div&gt;

在我的脚本中，我使用“委托事件处理”。 IE。我在“show”类的父元素上设置了一个点击处理程序。仅当单击.close 按钮时才会触发该事件。然后我从单击的元素“向上”操作：我确定需要删除的父元素，并从那里找到我通过应用 Array.splice() 方法删除的数组元素。

【讨论】：