javascript - 如何在 JavaScript 中抛出 mouseEvent?

标签 javascript d3.js dom svg dom-events

我有一个包含重叠元素且绝对定位的 SVG。这些元素包含在层中(使用 SVG g)标签,因此可能并不总是具有共同的父级。

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

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

我想要的行为是切换 - 单击形状将调用该形状的单击处理程序,并选择该形状。单击选定的形状(如果它与另一个形状重叠)将调用选定形状的单击处理程序,该处理程序将“抛出”单击事件,以便将其传递到底层元素。 (也许使用诸如 d3.event.throwreturn d3.event 之类的东西,或者类似的想法)。

这可能吗?

最佳答案

单击事件由元素的单击事件处理程序处理。因此,您要做的就是调用底层元素的单击事件处理程序。但是,如果您还想将覆盖元素的点击坐标传递给底层元素的点击事件处理程序,则必须传递它们(坐标)/它(事件)证据:

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

从未测试过,但是

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

关于javascript - 如何在 JavaScript 中抛出 mouseEvent?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19934751/

相关文章:

javascript - 测试使用带有 Jest 和 enzyme 的样式组件创建的组件

javascript - 让用户向网站标题添加内容的安全漏洞

javascript - 使用在不同页面中创建的变量

javascript - MVC4 客户端验证和 ajax

javascript - d3js中如何处理数据遮挡?

javascript - 枚举附加到文档的 HTML 对象的所有事件

javascript - JQuery 不会在每次迭代中追加以避免 DOM 重绘

d3.js - 使文本成为 svg 中的链接

javascript - D3 x 刻度定位

javascript - 将中间的 div 向左移动会在其右侧留下空白