Javascript 如何在所有层上获取鼠标事件？

我有一个带有一些重叠元素的网格（请参见代码段中的模型）。我需要将鼠标事件定向到不同的层

左键单击应该转到网格单元格（我必须知道单击了哪个单元格）。右键单击应转到“覆盖”。我该怎么做

目前，我已设法获得：

• [snippet]右键单击工作正常，左键单击重定向到覆盖的父级（可能与直接在下面的不同）
• [snippet With z-index]左键单击正常工作，右键单击仅在覆盖其父单元格的位置单击覆盖时工作

var eventDescription=$（'span'）；
$（'table'）。在（'click'，'td'，function（）上{
变量单元格=$（此）；
var column=1+cell.index（）；
var row=1+单元格。最近（'tr'）。索引（）；
text（'左键单击单元格“+行+”、“+列+”）；
});
$（'table'）。在（'contextmenu'，'div'，function（）上{
eventDescription.text（'右键单击'+this.getAttribute（'id'）+'））；
返回false；
});
表格{
边界塌陷：塌陷；
}
运输署{
位置：相对位置；
边框：1px黑色实心；
高度：20px；
宽度：20px；
}
div{
位置：绝对位置；
顶部：2个；
左：2px；
背景色：#e52e4e；
宽度：62px；
高度：16px；
z指数：2；
}
如果我正确理解了您的问题，那么一个解决方案是在鼠标“左键单击”事件循环期间，使用
div
（ie overlay）元素防止“指针事件”

您可以通过
mousedown
事件截获单击周期的开始-此时，您可以使用
指针事件切换
（覆盖）元素的类：none
，以防止随后的鼠标/指针事件在div上触发

通过这样做，您允许左键单击事件有效地绕过
元素，这意味着相应的鼠标将响应
“就好像div不在那里一样”

然后使用
mouseup
事件执行两件事：

执行td/小区检测逻辑（之前在常规
点击
事件中）

通过再次切换指针事件类，恢复
div
元素的默认指针事件行为
下面是一个工作示例：


var eventDescription=$（'span'）；
$（'table'）。关于（'mousedown'，'td'，函数（事件）{
//左键单击td时，切换“停止事件”类
//在所有div/overlay元素上。这将防止div
//正在启动要启动的上下文菜单/右键单击事件
//区别于那些
如果（event.button==0）{
for（document.body.queryselectoral（'div'）的const节点）{
node.classList.toggle（'stop-events'）
}
}
})
$（'table'）。关于（'mouseup'，'td'，函数（事件）{
//如果在td上释放鼠标左键，则执行常规操作
//单元检测逻辑，还恢复默认点事件
//使div仍然响应上下文单击的行为
如果（event.button==0）{
变量单元格=$（此）；
var column=1+cell.index（）；
var row=1+单元格。最近（'tr'）。索引（）；
text（'左键单击单元格“+行+”、“+列+”）；
//还原默认指针事件以允许上下文菜单事件
//关于divs
for（document.body.queryselectoral（'div'）的const节点）{
node.classList.toggle（'stop-events'）
}
}
})
$（'table'）。在（'contextmenu'，'div'，function（）上{
eventDescription.text（'右键单击'+this.getAttribute（'id'）+'））；
返回false；
});
表格{
边界塌陷：塌陷；
}
运输署{
位置：相对位置；
边框：1px黑色实心；
高度：20px；
宽度：20px；
}
div{
位置：绝对位置；
顶部：2个；
左：2px；
背景色：#e52e4e；
宽度：62px；
高度：16px；
z指数：2；
}
/*添加了这个类*/
.停止活动{
指针事件：无；
}

我想用鼠标左键点击位于下方的单元格。所以忽略也无济于事。问题是，单击父单元格的气泡不是位于下面的单元格。@Džuris好的，我想我明白了-刚刚更新了答案，这有帮助吗？@Džuris，不客气-“mousedown”/“mouseup”事件总是解决这些问题的好方法：-）