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

【问题标题】：How to select all child from document.queryselectorall() over eventlistener如何通过 eventlistener 从 document.queryselectorall() 中选择所有子项
【发布时间】：2020-06-09 11:03:16
【问题描述】：

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 的可能方法是什么？谁可以帮我这个事？

【问题讨论】：

点击？我猜你的意思是点击那些元素？
@RamondeVries OP的意思可能是“鼠标悬停在元素上时单击”，与单击元素相同。
是的，尽管它们是 .modal-trigger 的子类，但它们不会接受已选择的父类？我希望在单击父元素或那些子元素时触发触发

标签： javascript html jquery css queryselector

【解决方案1】：

我不完全确定.parent() 会在单击i 时选择正确的元素，但.children() onclick 是检测子元素上的右键单击事件的正确方法

$(".modal-trigger").children().on('click', function(){
$(this).parent().click();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="modal-trigger bg-brandPrimary-500 rounded-full p-8 shadow-custom text-white" data-modal-id="openFilterDialog"><span>dddd<i data-feather="layers" ></i></span></button>

【讨论】：

【解决方案2】：

只需使用您已经存在的 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;
}

【讨论】：