clicking 2 overlapping buttons at once

[anton9800]

Hello!  I am wondering if anyone can suggest a simpler solution to this, perhaps I'm overlooking something. 

I have several elements used as buttons, some of them overlap.  If I click on the overlapping elements, they both need to trigger their respective functions.  By default, only the top element will register a click, and the one underneath will not.

My solution was as follows:

Rather than assign click event listeners, I store nominal bounds of all buttons and on click check if my mouse position falls inside any of them.  If yes, I trigger the function for anything that's hit. 

This works, but it seems very overengineered.  Is there a simpler way to do this?

Thank you!

[JoãoCésar · Accepted solution]

Hi.

HTML5 or AS3?

You can use the getObjectsUnderPoint method in both languages.

HTML5 | AS3

Here is a HTML5 example:

stage.on("stagemousedown", function(e)
{
    var pressedObjects = e.currentTarget.getObjectsUnderPoint(e.stageX, e.stageY);
    pressedObjects.forEach(function(object)
    {
          object.alpha = 0.25;
    });
});

Regards,

JC

[anton9800]

perfect, that is exactly what I was missing!  Went the long route to achieve this result.  Thank you very much!

[JoãoCésar]

Excellent!

You're welcome!