If you have a renderer that has many different components and you need to mouse out and mouse over events when user moves mouse over the renderer, you have two options. Use only one element of your complex renderer to detect mouse over and mouse out. If this is not acceptable the other solution is to set mouseChildren to false on the renderer and use hit test in order to detect mouse interaction on different renderer elements. Check out the example of complex renderer event handling done with hit test approach.
private function onListRendererAdd(event:RendererExistenceEvent):void {
var renderer:DisplayObjectContainer = event.renderer as DisplayObjectContainer;
if (renderer) {
renderer.mouseChildren = false;
renderer.addEventListener(MouseEvent.MOUSE_OVER, onListRendererOver);
renderer.addEventListener(MouseEvent.MOUSE_OUT, onListRendererOut);
renderer.addEventListener(MouseEvent.CLICK, onListRendererSelection);
renderer.addEventListener(MouseEvent.CLICK, onListRendererInfo);
}
}
private function onListRendererRemove(event:RendererExistenceEvent):void {
var renderer:IEventDispatcher = event.renderer as IEventDispatcher;
if (renderer) {
renderer.removeEventListener(MouseEvent.MOUSE_OVER, onListRendererOver);
renderer.removeEventListener(MouseEvent.MOUSE_OUT, onListRendererOut);
renderer.removeEventListener(MouseEvent.CLICK, onListRendererSelection);
renderer.removeEventListener(MouseEvent.CLICK, onListRendererInfo);
}
}
private function onListRendererOver(event:MouseEvent):void {
// This event will be dispatched only once when user rolls over the renderer.
}
private function onListRendererOut(event:MouseEvent):void {
// This event will be dispatched only once when user moves from the renderer.
}
private function onListRendererSelection(event:MouseEvent):void {
var renderer:DisplayObject = event.target;
if (renderer && renderer.selectionControl.hitTestPoint(event.stageX, event.stageY)) {
// Check if the mouse was on the selection control when the click event was dispatched.
// This way we know that the mouse click was on the selection control.
}
}
private function onListRendererInfo(event:MouseEvent):void {
var renderer:DisplayObject = event.target;
if (renderer && renderer.infoControl.hitTestPoint(event.stageX, event.stageY)) {
// Check if the mouse was on the info control when the click event was dispatched.
// This way we know that the mouse click was on the info control.
}
}