如何通过事件侦听器从 document.queryselectorall() 中选择所有子项

Question

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 时，它不会触发数据模态 ID，但当我单击 #button 时，它会触发数据模态 ID。如果我们单击按钮跨度或 I 时，触发数据模态 id 的可能方法是什么？谁能帮我解决这个问题？

Answer 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>

Answer 2

只需使用您现有的 modalTrigger 变量，而不是查看目标。

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

另一种解决方案是使用 CSS 指针事件禁用子元素上的单击事件：

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