Making a Movieclip which is under a mask clickable and respond to MouseEvents

Question

This question is a follow up to the questions on link: Making a Movieclip which is set as mask clickable and respond to MouseEvents

The structure of your layers that I have on stage looks like this:

• holder_mc

  • dragCanvas_mc
  • mask_mc
  • canvas_mc

dragCanvas_mc - used for panning puposes.

mask_mc - Mask for canvas_mc

I am facing a problem now. I cannot get MouseEvents to be registered on the canvas_mc

This is required because I have to make drawings to the canvas

holder_mc.canvas_mc.addEventListener(MouseEvent.MOUSE_DOWN,onStartDrawing);

function onStartDrawing(evt:MouseEvent)
{
    trace("Hello");
}

I cannot see Hello in output window. Any idea where I am wrong. Thanks in advance.

Answer 1

If 'MovieClip A' is above 'MovieClip B' on the display list and 'MovieClip A' is 'mouseEnabled' then 'MovieClip B' will never receive the events "through" the top MovieClip.

In your case, the drag canvas is above, and is most likely attached to some mouse events. If this is the case, you need to handle the events with the top clip (drag canvas) and pass them through to the children, or the parent, holder_mc.

holder_mc.addEventListener(MouseEvent.CLICK, onClick);

function onClick(e:MouseEvent):void {
    // do normal clicky stuff for this object
    // then..
    //

    if(canvas_mc.hitTestPoint(mouseX, mouseY, false)) {
        // do clicky stuff for canvas mc
    }    

}

Some people might say use 'getObjectsUnderPoint' but there is a documented bug with it, so use hitTestPoint() http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html#hitTestPoint%28%29