mouseclick evt on underneath component

Report · Feb 05, 2014

As you can see the photo I attacted, I want to have underneath component (yellow) dispatch mouse_click event when I click on empty part of above component (green)

Here is what I have tried:

class MyPanel extends Panel {
     var image:Image = new Image();
     var bitmap:Bitmap = new Bitmap();
     private function init():void
     {
          drawImage(); // draw colored polygon in bitmap and load it on image
          this.addElement(image); // add image on panel
          image.addEventListener(MouseEvent.MOUSE_MOVE, checkClickability);
          image.addEventListener(MouseEvent.CLICK, onClickEvent);
     }
     private function checkClickability(evt:Event):void
     {
          var hex:uint = bitmap:Bitmap .bitmapData.getPixel32(evt.target.mouseX, evt.target.mouseY);
          if(hex > 0) {
                // make current component clickable
                this.mouseEnabled = true;
                this.mouseChildren = false;
          } else {
                // make current componrnt non-clickable
                this.mouseEnabled = false;
                this.mouseChildren = true;
          }
     }
}

The result of this code is:

1. even though I configured mouseEnabled and mouseChildred in panel, mouseEvents of "image" still works.

2. the panel can't get back to clickable because mouse_move event is not dispatched anymore.

In addition, I have tried mouseEnabled = true / false mouseChildren = true / false in all cases, it does not still work.

Can someone please tell me the best way to dispatch mouse events of underneath component?

Report · Feb 05, 2014

use a hittestobject is none of those objects have a parent/child relationship.