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

标签 javascript svg d3.js mouseevent

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

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

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

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

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

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

最佳答案

使用 jquery++ 你可以找到给定位置的元素,即使它们在其他元素后面,你可以做一些简单的事情,比如:

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

http://jquerypp.com/#within

关于javascript - 在重叠元素上注册鼠标事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19324375/

相关文章:

javascript - 如何在javascript中暂停递归函数3秒?

javascript - 如何在 Nest 6 中注入(inject) HTTP 服务器?

javascript - d3 通过 id 获取 rect 属性

jquery - Html5 拖放 svg 元素

javascript - 不确定是否调用了 d3.json 中的回调

javascript - 使用 Scrapy 从 &lt;script&gt; 标签中提取多行 javascript 内容

javascript - 在javascript中做最短工作优先算法

reactjs - 如何在 React.js 中打开 'throwIfNamespace' 标志

javascript - 如何在不触发缓慢重绘的情况下在网页上移动 SVG?

javascript - vue 组件中的 d3.js - 如何将鼠标事件挂接到元素?