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

4

2 回答 2

0

只需使用您已经存在的 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;
}
于 2020-06-09T11:07:32.603 回答
0

我不完全确定.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>

于 2020-06-09T11:12:52.080 回答