如何在 Javascript 中抛出 mouseEvent？答案

【问题标题】：How to throw mouseEvent in Javascript?如何在 Javascript 中抛出 mouseEvent？
【发布时间】：2013-11-24 22:20:38
【问题描述】：

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

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

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

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

这可能吗？

【问题讨论】：

标签： javascript d3.js dom svg dom-events

【解决方案1】：

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

基本思路是：

接收mouseevent
在当前元素上临时设置display: none。
使用document.elementFromPoint 确定当前元素下的元素，现在在Firefox、IE 和WebKit 中也可以使用。
将display 设置回元素上的内容。
dispatch the event 在它下面的元素上。
通过在事件上设置标志或其他全局标志来确保这不会导致无限循环。

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

【讨论】：

【解决方案2】：

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

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

从未测试过，但是

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

【讨论】：