时间戳

首页 > 解决方案 > 如何通过 eventlistener 从 document.queryselectorall() 中选择所有子项

javascript - 如何通过 eventlistener 从 document.queryselectorall() 中选择所有子项

问题描述

const modalTriggers = document.querySelectorAll(".modal-trigger");
modalTriggers.forEach((modalTrigger) => {
    modalTrigger.addEventListener("click", (clickEvent) => {
        const trigger = clickEvent.target;
        const modalId = trigger.getAttribute("data-modal-id");
        openModal(modalId);
    });
});

<button class="modal-trigger bg-brandPrimary-500 rounded-full p-8 shadow-custom text-white" data-modal-id="openFilterDialog"><span><i data-feather="layers" ></i></span></button>

当我点击#span #i 时，它不会触发data-modal-id，但是当我点击#button 时，它会触发data-modal-id。如果我们单击按钮跨度或 I，触发 data-modal-id 的可能方法是什么？谁可以帮我这个事？

标签： javascripthtmljquerycssqueryselector

解决方案

只需使用您已经存在的 modalTrigger 变量而不是查看目标。

const modalTriggers = document.querySelectorAll(".modal-trigger");
modalTriggers.forEach((modalTrigger) => {
    modalTrigger.addEventListener("click", () => {
        const modalId = modalTrigger.getAttribute("data-modal-id");
        openModal(modalId);
    });
});

另一种解决方案是使用 CSS pointer-events禁用子元素上的点击事件：

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

推荐阅读