Reaction to pointer events of children contained in interactive containers

• Before opening an issue, I checked if a similar issue exists by searching existing issues.

I report that I have discovered a change in the behavior of interactive containers.

Expected Behavior

Display Objects that are interactive will respond to pointer events regardless of the parent container settings.

Current Behavior

Display Objects may not respond to pointer events if the parent container is interactive.

Steps to Reproduce

• Create interactive containers
• Create a rectangle 1 with interactive = false on the front.
• Create a rectangle 2 with interactive = true on the back.
• Add rectangles 1 and 2 to the interactive container.

When I click on the overlapping area of rectangles 1 and 2, rectangle 2 responds in v6.5.7, but not in v7.0.4.

Here is the code for reproduction. jsfiddle v6.5.7 jsfiddle v7.0.4 Open the console and check the pointer event listener.

Question

Is this change a planned change in EventSystem? Or is it an unintended bug?

If it is a planned change, I would be happy to leave this issue as a record for users to understand. If this is an unintended bug, I’d be happy to help you resolve it.

Environment

• pixi.js version: v6.5.7 and v7.0.4
• Browser & Version: Chrome 107.0.5304.121
• OS & Version: macOS 12.6.1

[bigtimebuddy]

This is an intentional change in PixiJS to bring the interaction behavior more consistent with the DOM.

Here’s the same example with DOM elements:

https://jsfiddle.net/bigtimebuddy/k08xsfdt/

[MasatoMakino]

This behavior occurs only when there is a Container with interactive = true. So, if a box added directly to a stage, it will behave differently.

https://jsfiddle.net/MasatoMakino/f6mc1gtd/2/ In this case, the behavior is the same as in Pixi.js v6.5.7.