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

Question

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

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

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') 或通过 if else 条件运行它。

$(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

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

$( document ).mousemove();

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

var mousePos = [0,0];
$( document ).mousemove(function( event ) {
    mousePos[0] = event.pageX
    mousePos[1] = event.pageY
});
$("#target").click(function(){
// Compare mouse coordinates and your items ones using offset, height and width
if(mousePos[0] > $('#target2').offset.left){
    // Do whatever you are willing to do
}
});