通过Protovis面板传递事件

Question

我有一个Protovis图形，响应平移/缩放事件，如网站上的样本，其中涵盖了Panel，持有一个空的图形。不幸的是，它捕获了所有Events，如mouseover和mouseout，我的底层图形通常会响应它们。

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

vis.add (pv.Panel).events("所有")

如何防止变焦Panel捕获这些事件?或者我如何将它们传递到下面的Panel ?

Answer 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/

EDIT:根据下面的评论，这种方法可能是缩放事件的一个问题。在这个更新的小提琴中显示的更好的方法是，将不可见的Panel作为所讨论的标记的父标记——事件将自动从子标记上升到父标记，并且如果子标记没有为事件设置侦听器，它将不会干扰父标记。因此，只要所有需要接收事件的前景标记都是平移/缩放面板的子标记，这应该就可以了。