Pixi.js: [v4.4.0] Click event of a Sprite is sent even if a DOM element is above

Thanks for your fix. But the issue is not completely fixed.

If you click multiple times on a DOM element above a Sprite, I can reproduce the issue.

Example with v4.4.1 : https://jsfiddle.net/ku55deL6/9/

Nice :) the adventure continues!

Okay, https://github.com/pixijs/pixi.js/pull/3800 should fix another problem that was causing this.

@andrewstart could you verify that fiddle with your build?

Yep, it works. No matter how many times I click the yellow banner, the bunny stays put.

Hey guys!

I tried with version 4.4.2 and it seems that it's still not fixed for every situation.. if I have two sprites in the same container it works fine, but if sprites are in different containers, this problem still occurs.

See this: https://jsfiddle.net/FNevesFMQ/uwx24bm8/

At this point I think you're sneaking errors into the code to make work for me 😛
I'll have a chance to take a look at this this weekend. I know we have unit tests to enforce not getting pointer events for sprites that are overlapping, so I'll have to dig into why different containers changes that.

I wish 😛 my app uses this situation a lot, and unfortunately this cause me a lot of bugs..

I've got this issue solved with https://d157l7jdn8e5sf.cloudfront.net/fix-interaction-issues/pixi.js, but it's probably a good idea to have you use it to see if there are any other problems we don't know about.

The patch did not work for me.
The case is the following (mobile, safari):

1. there are 2 containers, both interactive and overlap each other
2. when I click the highest one click handler is fired in the lower too

@hazardsoft We currently have passing tests for the following conditions:

    Stage    (both interactive and non-interactive)
    /   \
   parent1  parent2   (together, both interactive and non-interactive)
      /       \  
    item1     item2   (always interactive)

    Stage    (both interactive and non-interactive)
        /    \  
    item1    item2   (always interactive)

In the tests item1 and item2 overlap, with item1 being on top of item2. How is your setup different? Could you provide a fiddle/pen?

@andrewstart, where can I take pixi.js with your fixes? So I can verify them against my case.

It was just released in https://github.com/pixijs/pixi.js/releases/tag/v4.4.3

Sorry, but it's not fixed yet. For the example I gave before it works, but on my app it's still possible click on items that are under clicked item.

At the moment, I didn't understand wich is the condition for that occurs..

The same for me, my case still not fixed. Will try to prepare jsfiddle.

Thanks @hazardsoft, a fiddle is definitely best way for us to verify fixes.

@bigtimebuddy more work for you, guys :) I seriously amazed that you are solving interaction issues, it looks like a nightmare.

Here, found it: https://jsfiddle.net/FNevesFMQ/uwx24bm8/

If interaction is set to Sprite it works fine, but if it is assigned to a container the behavior is wrong, and is possible to click on all items at same time.

This will be fixed (finally) with https://github.com/pixijs/pixi.js/pull/3877

Some more problems in Pixi 4.4.4 with mouseup event

1- https://jsfiddle.net/8qtz73hf/ (works with mousedown)
2- https://jsfiddle.net/sbxoya8x/ (doesn't work with mouseup)

Looks like a side effect of attaching mouseup listeners to the window, to ensure that we are able to send mouseupoutside events if the mouse is off the canvas (or blocked by another div). I guess we'll have to inspect the target of the event, in that case, to ensure that it is the canvas and not another element.

is it the same issue of #3466?
Should I have to open a new issue for this?

No, you shouldn't need to. I've been quite busy at work, which is why I haven't had a chance to fix it yet.

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.