Event registrer on children rather than parent

Question

Hi all,

Hopefully a quick question here. I have setup a "LayoutPage" custom class (based on MovieClip) and I am attemptimg to create a "selected" behaviour.

When I assign my "addEventListener(MouseEvent.CLICK,toggleSelection)" from within my custom class, everything works as expected, clicking any object of that class does display the correct behaviour.

Now, I would like to extend the functionality by adding keyboard modifyer to either extend the selection or replace it.

For this, I thought of moving the "addEventListener" out of the class and put it inside the parent instead (my "PageLayout" class where all the "LayoutPage" live). But by doing so, the click event no longer register on the "LayoutPage" class but rather on its individual children (Page icon, Page number text field, Page Highlight shape, etc.)

Can anybody explain why this is happening and how I can circumvent it?

TIA

Answer 1

This should be happening no matter where you put your addEventListener. It is because mouseChildren is switched on by default. It is probably best to turn it off inside your LayoutPage class like so:

myLayoutPage.mouseChildren = false;

The actual issue is that use are probably using currentTarget to reference the item that was clicked on in your event handler method. Take a look at the descriptions for currentTarget and target to get a good idea of how they differ.

A good option would be to add your listener at the PageLayout level, but add it specifically to each LayoutPage child like so:

myLayoutPage.addEventListener(MouseEvent.CLICK, toggleSelection);

This way you can just use target in your handlers. But it would probably be best to still switch mouseChildren to false on each of your LayoutPage instances.