1

我有一个带有重叠元素的 SVG，绝对定位。元素包含在层（使用 SVG g）标签中，因此可能并不总是有一个共同的父级。

在 D3 中，元素可以响应它们捕获的点击事件。但是，重叠元素会阻止底部元素捕获任何点击事件。（由于我的应用程序的设计，我不能随意更改它们的 DOM 顺序 - 这很重要。）我想知道是否有办法在保留拖动事件的同时通过元素传递点击事件 - 几乎就像“抛出“如果可能的话。

由于我仍然需要拖动事件和其他指针事件，我不能使用“指针事件：无”属性。此外，由于这些元素可能没有共同的祖先，因此我不能以这种方式真正循环遍历元素。

我想要的行为是切换 - 单击形状将调用形状的单击处理程序，然后选择该形状。单击所选形状（如果它与另一个形状重叠）将调用所选形状的单击处理程序，该处理程序将“抛出”单击事件，以便它将传递到底层元素。（也许使用类似的东西，说，d3.event.throw或，喜欢，，return d3.event或类似的想法）。

这可能吗？

4

2 回答 2

0

单击事件由元素的单击事件处理程序处理。所以你想做的一切，就是调用底层元素的点击事件处理程序。但是，如果您还想将上层元素的点击坐标传递给底层元素的点击事件处理程序，则必须将它们传递（坐标）/它（事件）明显：

overlyingElement.onclick=function(e){
    var event=e||window.event;
    underlyingElement.click(event);
}

没测试过，但是

我希望它在 IE 中也能正常工作。

于 2013-11-12T16:49:15.663 回答
0

这是否意味着您要在单击时选择该元素下的所有元素？我不确定您为什么要这样做，但这就是您要寻找的：http: //www.vinylfox.com/forwarding-mouse-events-through-layers/

基本思想是：

  1. 收到mouseevent
  2. 临时设置display: none在当前元素上。
  3. 使用 确定当前元素下的元素document.elementFromPoint，它现在也适用于Firefox、IE和 WebKit。
  4. 回到display它在元素上的样子。
  5. dispatch它下面的元素上的事件。
  6. 通过在事件或其他全局标志上设置标志来确保这不会导致无限循环。

这适用于一级深度，因为elementFromPoint在第二个元素尝试做同样的事情之后会返回顶级元素。如果您想更深入地了解元素堆栈，那么您实际上可以在所有较低的元素都通过在您转发或其他一些全局机制上设置的回调display接收到事件后将属性设置回来。event

于 2013-11-12T22:29:13.500 回答