Question

I have two or more graphic elements (bitmap, control) on stage. All of them are listening to mouse events. Some times they can be overlapped by other elements completely or partially. (think of scrambled pieces of jigsaw puzzle)

When I click on an element, the click event should by passed on the element if there is something underneath it at that point. If there is nothing underneath the mouse point, the move event should trigger.

For example: Look at the boxes below. Say box A drawn with “=” sign is overlapping box B drawn with “-” sign. The collusion area is drawn with “#” sign.

If the mouse is clicked on “#” area, then the event should trigger the box B’s click event instead of the box “A” and respective events if the mouse is clicked on non colluding areas of A and B.

========
=      =
=   ####----
=   ####   -
====####   -
    -      -
    -      -
    --------

I want to able to bypass all the element’s mouse events until the element in the bottom has reached. I hope my question makes sense.

Answer 1

DisplayObjectContainer has a method getObjectsUnderPoint. This means that in your event handler you can retrieve the list of DisplayObjects under the click point and check if this list contains anything else besides the actual clicked object, something like that:

function mouseClickHandler(e:MouseEvent):void
{
  var clickedObject:DisplayObject = e.currentTarget as DisplayObject;
  var list:Array = objectsContainer.getObjectsUnderPoint(new Point(objectsContainer.mouseX,objectsContainer.mouseY));
  for each (var object:DisplayObject in list) {

       if (clickedObject != object) {
         //call different eventHandler on the object
         return;
       }
    }
    //call moveEventHandler
}

objectsContainer in this case would be a Stage object (if your objects are added directly to stage) or some DisplayObjectContainer that is parent to all those objects.