Viewport is catching events from HTML overlays

[Amansaxena001]

There is viewport on the top of that we have a html modal where in if we hover or perform and any actions like click those are propagating to pixi. Is there a workaround to stop this behaviour. I know that pixi registers the events on window due to which this is happening.

One workaround I can think of is using srcElement to check if the event is coming from html or canvas and accordingly handle it but again its not scalable.

If you have any solutions around it please let me know

"pixi.js": "7.3.1", "pixi-viewport": "5.0.2",

[Amansaxena001]

@epaezrubio

[Fuzzyma]

I encountered the same problem. What might work is also registering events on html (before initializing pixi) and call e.stopImmediatePropagation() when the event is not coming from the canvas (or coming from your overlay):

Assuming that app contains your pixi app:

const fixHoverOnNonCanvas = (e) => {
  if (e.target !== app.canvas) e.stopImmediatePropagation();
};

 window.addEventListener('pointermove', fixHoverOnNonCanvas, { capture: true, passive: true });