@pixi/events Masked container with nested child containers doesn't bubble events.

Expected Behavior

Grandchild’s event listeners should work as they do with non masked grandparent.

Current Behavior

Grandchild’s event listeners are not triggered if it’s grandparent is masked.

Steps to Reproduce

See running example.

Create following hierarchy:

Container with mask and interactive -> Container without any event listeners or mask – -> Displayobject with eventlistnener

Test with mask enabled: Does not work. Comment out adding mask: Does work.

Environment

• pixi.js version: 6.1.3
• Browser & Version: Chrome 94
• OS & Version: Windows 10
• Running Example: https://www.pixiplayground.com/#/edit/t5WBOFp3-SBRfYvedOxe1

[domis86]

@ShukantPal very good and clear explanation! 👍

[ShukantPal]

It’s not a bug, explanation

I’ve done some investigating and this is not a bug. In your code, you have the following scene graph structure:

Stage
 |
Container
 |
Container, Mask
|          |
Button     (no children)

This means the mask is like any other DisplayObject and it’ll capture events passing it’s hit-test if one of it’s ancestors is interactive. Indeed, the mask you’ve added is a 75px square that’s transparent and it is rendered above the red button. That’s why the hitTestRecursive method returns a 0-length array on the mask (it passes hit testing but since it’s not interactive, it isn’t included in the propagation path of the ensuing pointerdown event):

What you can do about it!

1 − (suboptimal) Reorder your scene graph

You can reorder the children of the grandparent container, such that the mask comes before the button. This will cause the hit-testing algorithm to prioritize the button over the mask.

However, the mask will continue to capture events that happen outside the button but inside the mask.

2 − (optimal) Set visible to false on the mask

You can instead set the visible flag on the mask to false. The hit-testing algorithm will ignore these invisible objects.

I’ve updated the playground you’ve attached to this issue to demonstrate the fix.

https://www.pixiplayground.com/#/edit/t5WBOFp3-SBRfYvedOxe1