mouseclick evt on underneath component
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?
AdChoices