Question

如何在任意多个相互重叠的HTML元素上触发多个鼠标单击事件？

我知道您可以使用pointer-events: none;来使单击通过元素，但是如果我想触发元素 AND 上的鼠标单击事件怎么办？在它下面任意许多其他元素上？

Answer 1

但是如果我想触发一个元素上的鼠标单击事件以及它下面任意多个其他元素上的鼠标单击事件怎么办？

事件泡泡。在内部元素上触发的均值和事件也将被父元素接收，直到最顶层的父元素为止。

<div id="topmost">
    <div id="second">
        <p id="firstp"></p>
    </div>
</div>

假设您正在使用jquery。下面是您如何侦听div.id =“ topmost”以下所有元素的点击事件。

由于正常的事件流是针对位于最高div元素中的任何元素触发的任何点击事件（可能是任何其他类型的事件），都会被冒泡到最外部的元素，因此我仅列出最高点击事件然后通过检查目标元素的ID来检查哪个元素触发了该事件。 e.target将是执行点击的实际元素。您可以切换target.attr（'id'）或在其他条件下运行它。

$(function () {
  $("#topmost").on("click", function (e) {
    e.preventDefault();
    var target = $(e.target);
    if(target.attr('id') === "idOfElement"){
       // code to handle the event
    }else{

});

Answer 2

一种解决方案可能是使用：跟踪鼠标移动：

let-fileList="file[user.UserId]"

将坐标存储到全局变量，然后在单击元素时检查其位置。那会得到类似的东西：

$( document ).mousemove();

如何在相互覆盖的多个HTML元素上触发鼠标单击事件？

2 个答案: