JavaScript - for循环中的for循环在按钮按下时触发两次答案

【问题标题】：JavaScript - For loop within a for loop triggering twice on button pressJavaScript - for循环中的for循环在按钮按下时触发两次
【发布时间】：2021-12-25 21:33:47
【问题描述】：

我在一个垂直列表中有一系列水平列表。每个列表项都有一个 ID 'cr-id-x_y'，其中 x 是垂直列表项索引，y 是水平列表项索引。我在 for 循环中创建了一个 for 循环，以确定目标列表项。我遇到的问题是按钮按下似乎触发了两次（即我看到“Hello world”在按下按钮时打印到控制台两次）。请问谁能告诉我哪里出错了？

document.getElementById("parent-list").addEventListener("click", function (e) {
  for (let x = 0; x < 100; x++) {
    for (let i = 0; i < 30; i++) {
      if (
        e.target.closest(`#cr-id-${x}_${i}`) &&
        (e.target.nodeName == "BUTTON" ||
          e.target.parentElement.nodeName == "BUTTON")
      ) {
        console.log("Hello world");
      }
    }
  }
});

【问题讨论】：

为什么要按ID选择最接近的元素？每个 ID 在 DOM 中应该是唯一的，您可以直接选择它，而无需从任何东西中选择 .closest()
此外，通过在 100x 循环内的 30x 循环内执行 closest(`#cr-id-${x}_${i}`)，您在每次单击按钮时都在寻找 三千次 最接近的元素！找到元素后，您甚至都不会破坏这两个循环中的任何一个，因此每次单击时都会完成所有 3000 个循环。当然，有一种方法可以大大减少资源密集度，因为您的 CPU 必须跪下。喜欢点击事件监听器？

标签： javascript html list for-loop

【解决方案1】：

从您发布的代码中，无法猜测它为什么会触发两次，但实际上根本不需要循环。当你像你一样委托时，你应该能够询问点击的目标 - 例如像这样

document.getElementById("parent-list").addEventListener("click", function(e) {
  const tgt = e.target; // or if nested e.target.closest('button'), then use tgt in the next if
  if (tgt.tagName==="BUTTON") {
    const someParent = tgt.closest('someElementThatMightHaveCRId');
    if(someParent.id && someParent.id.startsWith('cr-id-')) {                
      console.log("Hello world",someParent.id);
    }
  }
})

【讨论】：