点击 Raphael 中的路径答案

【问题标题】：Click through path in Raphael点击 Raphael 中的路径
【发布时间】：2016-05-28 14:07:09
【问题描述】：

我定义了一个包含多个元素的不透明度为 0 的路径。这样做的目的是因为当鼠标悬停在该路径上时，该元素会出现（如果我们离开该路径，则该元素会消失）。我的问题是由于路径位于画布顶部，我无法单击这些元素并期望能够处理该事件。

解决这个问题的最佳策略是什么？

我试图把路径放在后面（）；但是当我将鼠标悬停在一个元素上时，就像我离开了路径一样。
我尝试将元素放在顶部，但结果与之前相同。
使用函数 ispointinsidepath() 然后获取我单击的点的坐标似乎很挑剔，因为元素大小不是恒定的。

【问题讨论】：

“路径”是什么意思？可以发jsFiddle 来演示吗？

标签： javascript path click raphael mouseover

【解决方案1】：

您可以在每个元素上放置处理程序，并以这种方式处理它。如果使用 Snap 而不是 Raphael 甚至可能会稍微容易一些，因为您可以使用组（并且不需要多个事件处理程序），但假设 Raphael 是您可以这样做的要求...

var r = paper.rect(50,50,200,200).attr({ fill: 'blue', opacity: '0'}).hover( hoverover, hoverout )
var c1 = paper.circle(100,100,30).attr({ fill: 'red' }).click( clickFunc ).hover( hoverover, hoverout)
var c2 = paper.circle(200,200,30).attr({ fill: 'blue' }).click( clickFunc ).hover( hoverover, hoverout )

function hoverover() { r.attr({ opacity: 1 } ) }
function hoverout()  { r.attr({ opacity: 0 } ) }
function clickFunc() { alert('clicked')}

jsfiddle

【讨论】：