Interaction Issue - Button clicks go through to buttons below.

Hi,

We have recently updated our code to use pixi 4.4.0 from 4.3.5 and have come across an issue with mouse/touch events firing on multiple interactive elements when they overlap. This issue is still present in V4.4.2.

We were able to reproduce this issue with this simple PIXI example: https://jsfiddle.net/apodgg2c/2/

Red box is drawn below the blue box.

Click the red box and you get a console output “RED FIRED”

Click the blue box and you get a console output “BLUE FIRED”

Click the overlapping region and both RED and BLUE will fire.

In the previous version (4.3.5) only the BLUE will fire when you click the overlapping region. (as would be expected)

A little more information:

• If we add two interactive elements (buttons) as siblings to a container then they work fine and they will not click through when they overlap.
• If you create two containers as children of a parent container and place a button inside each of the containers then it fails.

Here are some examples of scene graph hierarchies and which ones work (no click through) and which ones fail (clicks through)

OK

	Stage
	/  \
     Btn1   Btn2


Fail
	Stage
	/   \
 container container
      /       \  
    Btn1      Btn2


Fail 
(Btn1 added first)
	Stage
	/   \
      Btn1 container
              \  
              Btn2


OK 
(Btn1 added last)
	Stage
	/   \
 container  Btn1
      /         
    Btn2      

Any suggestions for a work around or is this something that will like be fixed in future versions?

This issue may be related to the DOM elements also clicking through? https://github.com/pixijs/pixi.js/issues/3847 https://github.com/pixijs/pixi.js/issues/3790

[air-command]

From our perspective this issue has been resolved, thank you. I believe the issue can be closed.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.