拉斐尔元素选择问题 [英] Raphael element selection problem

问题描述

希望这对任何拉斐尔专家来说都是一个简单的问题！

Hopefully this is a simple question for any Raphael experts!

我创建了一个路线图，用户可以点击每个国家查看详细信息。它工作正常，只是将鼠标移到红线上会触发mouseout事件。我需要红线才能有效地成为地图上的图像而不是交互元素。我如何实现这一目标？

I've created a route map where users can click on each country to see the details. It works fine except that passing the mouse over the red line triggers the mouseout event. I need the red line to effectively be just an image on the map and not an interactive element. How do I achieve this?

查看地图：
http://www.martyn-roberts.co.uk/cycleafrica/route

谢谢！

推荐答案

这个答案在一年零四年前会如此优雅......有一种非常简单的方法可以实现这一点，尽管不是直接通过Raphael，使用SVG的指针事件属性。您需要做的就是使用指针事件设置与路径路径关联的节点的样式：none。在javascript和使用jquery，这将是

This answer would have been so elegant a year and a quarter ago... there's a very simple way of accomplishing this, albeit not directly through Raphael, using the SVG's pointer-events property. All you need to do is to style the node associated with your route path with pointer-events: none. In javascript and using jquery, that would be

$(routePath.node).css( 'pointer-events', 'none' );

或者只是直接使用javascript：

Or just using javascript directly:

routePath.node.style.pointerEvents = 'none';

这会强制所有鼠标事件掉落到路径后面的元素上。

That will force all mouse events to "drop" onto the elements behind the route.

这是一个演示使用带圆圈和路径的指针事件的小提琴。

这篇关于拉斐尔元素选择问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！