Javascript 单击Raphael中的路径

Javascript 单击Raphael中的路径,javascript,path,click,raphael,mouseover,Javascript,Path,Click,Raphael,Mouseover,我已经定义了一个不透明度为0的路径,其中包含多个元素。这样做的目的是因为当鼠标位于该路径上时,元素会出现(如果我们离开该路径,则元素会消失)。我的问题是,由于路径位于画布的顶部,我无法单击这些元素并期望能够处理事件 处理这一问题的最佳策略是什么 我试着把这条路放在后面();但当我将鼠标悬停在某个元素上时,就好像我离开了路径一样 我试图把元素放在上面,但结果和以前一样 使用函数ispointinsidepath()然后获取我单击的点的坐标似乎很挑剔,因为元素大小不是恒定的 您可以在每个元素上放置

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

处理这一问题的最佳策略是什么

  • 我试着把这条路放在后面();但当我将鼠标悬停在某个元素上时,就好像我离开了路径一样
  • 我试图把元素放在上面,但结果和以前一样
  • 使用函数ispointinsidepath()然后获取我单击的点的坐标似乎很挑剔,因为元素大小不是恒定的

您可以在每个元素上放置处理程序,并以这种方式进行处理。如果使用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')}

你所说的“路径”是什么意思?你能做一个演示吗?