CODEWITHSUNDEEP
javascriptmouseeventhtml5-canvaskineticjs
puk
puk

Reputation: 16782

Distinguish between leaving shape and entering overlapping shape (KineticJS)

I imagine this would be a pretty common issue I am having. I have one small shape on top of a larger shape. When I enter the large shape, it gets registered as a mouseenter/mouseover. But when I enter the small shape, the large shape registers a mouseleave/mouseout. This would be like if I went to the bathroom at LAX and airport personnel demanding that I go through security again for having left the terminal.

Here is a minimal JSFiddle example illustrating the problem.

Upvotes: 2

Views: 522

Answers (2)

puk
puk

Reputation: 16782

Michael's suggestion above seemed promising, but all it does is either handicap one shape (in this case the triangle), or moves all the functionality up into the group, which is not what I want either.

Temporarily what I have done is use the mouseenter signal for the triangle and mouseleave signal for the circle, which seems to work. However, I doubt this will work for more than two overlapping shapes. If someone comes up with a better solution, I'm all ears =)

Upvotes: 0

michael.orchard
michael.orchard

Reputation: 486

This is intended. You are no longer hovering over the circle, you are hovering over the triangle. These are layers, so by your definition you're touching floorboards when standing on the carpet.

If you want the triangle to ignore events, you can call triangle.setListening(false), as shown here: http://jsfiddle.net/YcBNL/19/. This way, events will pass through it to the shape below.

Another approach is to group the circle and triangle using a Kinetic.Group, and add the event listener to the group instead of the circle.

Upvotes: 1

Related Questions