通过 Protovis 面板传递事件答案

【问题标题】：Pass events through Protovis Panels通过 Protovis 面板传递事件
【发布时间】：2012-01-12 09:32:11
【问题描述】：

我有一个响应平移/缩放事件的 Protovis 图形，例如 website 上的示例，它覆盖了 Panel，该图形包含一个空的图形。不幸的是，它捕获了所有Events，如mouseover 和mouseout，我的底层图形通常会响应这些mouseout。

这是因为您必须将面板设置为接受所有事件。根据docs，唯一有效的参数是'all'、'painted'和'none'

vis.add(pv.Panel) .events("全部")

如何防止缩放Panel 捕获这些事件？或者我怎样才能将它们传递给它下面的Panel？

【问题讨论】：

标签： javascript dom-events protovis

【解决方案1】：

我认为这不一定是您想要的答案，但据我所知，没有简单的方法可以将事件传递给较低的元素。但是，如果您的图表与示例相似，您可以简单地更改不可见 Panel 的顺序和应该接收事件的标记，来自：

vis.add(pv.Dot)
    .event('click', function() { alert("clicked") })
    // ... etc

vis.add(pv.Panel)
    .events("all")
    // ... etc

到：

vis.add(pv.Panel)
    .events("all")
    // ... etc

vis.add(pv.Dot)
    .event('click', function() { alert("clicked") })
    // ... etc

这将更改标记的 z 顺序，以便点在面板之前接收点击事件。它不是即插即用的，因为您必须将面板插入现有图表中的正确位置，但它应该可以工作。

您可以在此处查看基于示例的 jsFiddle：http://jsfiddle.net/nrabinowitz/Ctxrr/

编辑：根据下面的评论，这种方法可能会成为缩放事件的问题。更好的方法，如this updated fiddle 所示，是使不可见的Panel 成为相关标记的父级 - 事件将自动从子级向父级冒泡，如果子级没有为事件设置侦听器，它不会干扰父母。因此，只要需要接收事件的所有前景标记都是平移/缩放面板的子级，这应该可以工作。

【讨论】：

不幸的是，当您像这样重新排列面板时，标记会干扰平移/缩放事件。当光标位于标记上方时，用户可以进行平移/缩放。当缩小时，这成为一个真正的问题，一个标记在光标下滑动并且你一直跳到一个页面。
@smith324 - 请参阅我上面的更新。如果这种方法可行，那比我的第一个建议要好。
它确实可以正确缩放，但现在平移功能无法正常工作（过于夸张）。我现在没有时间，但稍后会尝试调试它。