在重叠元素上注册鼠标事件

Register mouse events on overlapping Elements

本文关键字:鼠标 事件 注册 重叠 元素      更新时间:2023-09-26

在我的svg图像中,我画了很多路径(和其他元素),其中一些是部分透明的,可能相互重叠。

如何确保鼠标事件(如单击)被所有元素的侦听器接收,而不仅仅是最顶层的侦听器。

基本示例(假设 A、B、C 具有相同的坐标和大小):

<g id="parent">
  <rect id="A" .../>
  <rect id="B" .../>
  <rect id="C" .../>
</g>

在此示例中,期望的结果是 A、B、C 上的侦听器注册了对矩形 C(最顶部)的单击

使用 google,我了解到我可以通过向父级注册侦听器然后检查受影响的子元素来自己调度事件,但是我想知道是否有更好的解决方案或库。

使用 jquery++,您可以找到哪些元素位于给定位置,即使它们位于其他元素后面,您也可以执行一些简单操作,例如:

$("#parent").on("click",function(ev){
    $(this).children().within(ev.offsetX,ev.offsetY)...; //filter the elements
});

http://jquerypp.com/#within