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

时间:2013-10-11 17:53:42

标签: javascript svg d3.js mouseevent

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

如何确保所有元素的听众都接收到点击等鼠标事件,而不仅仅是最顶层的事件。

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

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

在这个例子中,期望的结果是A,B,C上的听众注册了矩形C(最顶层)的点击

使用谷歌我了解到我可以通过向父母注册一个监听器然后检查受影响的子元素来自己发送事件,但是我想知道是否有更好的解决方案或库。

1 个答案:

答案 0 :(得分:1)

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

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

http://jquerypp.com/#within