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，但当我单击#按钮时，它会触发data-modal-id。 如果点击按钮span或i，触发data-modal-id的可能方式是什么？ 有人能帮我这个忙吗？
我不完全确定.parent()在单击i时会选择正确的元素，但.childress()onclick是检测子元素右键单击事件的正确方法
null
$(".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>
只需使用您已经存在的modalTrigger变量，而不是查看目标。
const modalTriggers = document.querySelectorAll(".modal-trigger");
modalTriggers.forEach((modalTrigger) => {
modalTrigger.addEventListener("click", () => {
const modalId = modalTrigger.getAttribute("data-modal-id");
openModal(modalId);
});
});
另一种解决方案是用CSS指针-事件禁用子元素上的click事件:
.modal-trigger * {
pointer-events: none;
}
