CODEWITHSUNDEEP
javascriptpathclickraphaelmouseover
pomeKRANK
pomeKRANK

Reputation: 47

Click through path in Raphael

I have defined a path with opacity 0 that includes within several elements. The purpose of that is because when mouse is over that path, the element appears (or disappear if we left the path). My problem is since the path is on top of the canvas, I cannot click on those elements and expect to be able to handle the event.

What would be the best strategy to deal with that?

Upvotes: 1

Views: 99

Answers (1)

Ian
Ian

Reputation: 13842

You can put handlers on each of the elements, and deal with it that way. Might even be slightly easier if using Snap rather than Raphael as you can use groups then (and not need multiple event handlers), but assuming Raphael is a requirement you could do this...

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

Upvotes: 1

Related Questions