Stop MouseEvent-propagation of displayList views to starling views

Question

I'm creating a game that uses the starling-layer (the game itself) and the classic display list which contains several Popups and Stuff like that.

I have one thing that troubles me: If MouseEvents are generated on displayList-elements they always go through to the starling layer and produce TouchEvents etc. which is quite annoying.

I was wondering there is some general (and easy to use) approach to handle that.

One possibility was to listen on all displayList-Elements for the following Events:

interfaceElement.addEventListener(MouseEvent.MOUSE_MOVE, stopPropagationHandler);
interfaceElement.addEventListener(MouseEvent.MOUSE_DOWN, stopPropagationHandler);
interfaceElement.addEventListener(MouseEvent.MOUSE_UP, stopPropagationHandler);

private function stopPropagationHandler(e:MouseEvent):void {
    e.stopPropagation();
}

But this looks quite nasty to me. And even if I did it like that, I have one more issue: If a starling-element is below that display-list-element and if it has a TouchEvent.TOUCH for rollover-behavior >> the rollover-appearance will not be removed from the starling if you hover over the display-list-element.

I also thought about putting a dummy-starling element behind every display-list-element,... to stop the events.. but that all sounds a bit "over-complicated" for such a "simple" task. Or am I missing something?

A hint would be much appreciated. Thanks.

Answer 1

You could create 1 main container in the displaylist (not the stage) and listen for ROLL_OVER and ROLL_OUT, and set somekind of global flag there, that your mouse is over the display-list container. Then in your starling events, check for this flag. This isn't the nicest solution out there i guess, but it should work

var isOverDisplayList:Boolean = false;
container.addEventListener(MouseEvent.ROLL_OVER, onRollOver);
container.addEventListener(MouseEvent.ROLL_OUT, onRollOut);

function onRollOver(e:MouseEvent) {
  isOverDisplayList = true;
}

function onRollOut(e:MouseEvent) {
  isOverDisplayList = false;
}