Prevent interaction of "behind" object when two interactive objects overlap

[cnwerb]

Sorry for the confusing title, I'll tell you the situation:

I have interactive objects that respond to mouseover events. I've noticed that when two of these interactive objects overlap (i.e. one is partially obscured by the other one) and I mouseover the closest object in such a way so that the cursor is technically over the furthest object as well, the mouseover event of both objects is triggered, "through" the closest object. 

What I want:

When an interactive object is is partially obscured by another object, I want ONLY the closest object to be interactive. I don't want interaction events to be triggered "through" other objects.

How can I do this? Thank you in advance

 

[Jammy]

On my game this happens when I have a UI window in front of the game, so when the UI is clicked I just set a global var like game.ui.clicked = true, and then on the event handler for everything below UI i check if game.ui.clicked === true before running.

Takes a bit more code and designing the code to achieve but works well for me.

If you're is a mouseover case then you could set a property on the sprite e.g. sprite.hoverOver = true and if its true run the correct code from there.

[cnwerb]

1 hour ago, Jammy said:

On my game this happens when I have a UI window in front of the game, so when the UI is clicked I just set a global var like game.ui.clicked = true, and then on the event handler for everything below UI i check if game.ui.clicked === true before running.

Takes a bit more code and designing the code to achieve but works well for me.

If you're is a mouseover case then you could set a property on the sprite e.g. sprite.hoverOver = true and if its true run the correct code from there.

I was hoping for something a little more elegant, since my objects are all children of one container, implementing this solution would mean I have to iterate through every child in the container (expensive), check if their pixels overlap with the current one (expensive), and if so, check the flag.

[Insi]

Does it suitable only for mouseover event? I have nothing similar with up/down/click events.

[cnwerb]

18 minutes ago, Insi said:

Does it suitable only for mouseover event? I have nothing similar with up/down/click events.

This isn't an issue with click events because you can use event.stopPropagation(). But that doesn't work for mouseover events.

[Jammy]

3 hours ago, cnwerb said:

I was hoping for something a little more elegant, since my objects are all children of one container, implementing this solution would mean I have to iterate through every child in the container (expensive), check if their pixels overlap with the current one (expensive), and if so, check the flag.

I dont think you'd have to do any of that, just set the property on pointer hover and also check that property on the other ones? If both are true you already know its over both, no need to iterate

[cnwerb]

4 minutes ago, Jammy said:

I dont think you'd have to do any of that, just set the property on pointer hover and also check that property on the other ones? If both are true you already know its over both, no need to iterate

Good point, only need to iterate through the list of children. O(n) worst case scenario. Hopefully a better solution that I'm missing comes along otherwise I'll go with that.