使用querySelectorAll绑定事件后，点击按钮子元素无法触发modal的解决咨询

这个问题很常见，原因是当你点击<span>或<i>时，clickEvent.target指向的是这些内部子元素，而data-modal-id属性是挂在父级<button>上的，所以自然拿不到属性值，触发不了openModal。下面给你几种简单有效的解决方案：

方法1：使用currentTarget代替target #

currentTarget始终指向绑定事件监听器的元素（也就是你的.modal-trigger按钮），不管事件是从哪个子元素冒泡上来的。修改你的JS代码如下：

const modalTriggers = document.querySelectorAll(".modal-trigger");
modalTriggers.forEach((modalTrigger) => {
  modalTrigger.addEventListener("click", (clickEvent) => {
    // 直接从绑定事件的按钮上拿属性，不用管点击的是哪个子元素
    const modalId = clickEvent.currentTarget.getAttribute("data-modal-id");
    openModal(modalId);
  });
});

这是最直接的解决方案，逻辑清晰，不需要额外处理DOM结构。

方法2：用closest()向上查找目标元素 #

如果需要保留target的使用场景，可以通过closest()方法从点击的元素向上遍历DOM，找到最近的.modal-trigger元素：

const modalTriggers = document.querySelectorAll(".modal-trigger");
modalTriggers.forEach((modalTrigger) => {
  modalTrigger.addEventListener("click", (clickEvent) => {
    // 从点击的元素向上找最近的.modal-trigger按钮
    const trigger = clickEvent.target.closest(".modal-trigger");
    if (trigger) { // 确保找到元素后再执行
      const modalId = trigger.getAttribute("data-modal-id");
      openModal(modalId);
    }
  });
});

这种方法更灵活，哪怕后续按钮内部的DOM结构有变化，只要.modal-trigger是父级元素，就能正常工作。

方法3：通过CSS阻止内部元素接收点击事件 #

如果你不想修改JS代码，可以给按钮内部的所有元素添加pointer-events: none，让点击事件直接透传给父级按钮：

.modal-trigger > * {
  pointer-events: none;
}

这个方法简单快捷，但要注意：如果你的<i>或<span>本身需要处理其他交互（比如点击图标切换状态），就不能用这个方案了，否则会阻止它们的所有点击事件。

内容的提问来源于stack exchange，提问作者Ashish Dhakal