How to stop PhaserJS from eating mouse events?

Question

I've put a PhaserJS instance on my website for background visuals. Unfortunately, when the mouse is over it, it eats all my clock events (and probably other mouse events too), despite that the relevant div is actually underneath the visual elements that are meant to be hearing these events. This means that these objects don't get to hear the events, which is breaking a lot of functionality.

I've tried this:

let gio = inst.game.input; // Game input object
gio.enabled = false;
gio.isOver  = false;
gio.mouse.enabled = false;
gio.mouse.isTop = false;
gio.globalTopOnly = false;

But to no avail. Ideas, anyone?

Answer 1

If you don't want to have any interaction with the phaser game, because it is only background, you can use the CSS property pointer-events:none; on the parent of the phaser-game-canvas.

If you really don't need any interaction, disabling the MouseEventListner with this.input.mouse.stopListeners() or all InputEventListeners this.input.enabled = false is a good extra measure.

Short Demo:
(ShowCasing how you can click the Element below)

const COLORS = [ 0x9bbc0f, 0x8bac0f, 0x306230, 0x0f380f ];

let overlay = document.getElementById('overlay')
let underlay = document.getElementById('underlay')

overlay.addEventListener('click', e => console.info('from overlay'))
underlay.addEventListener('click', e => console.info('from underlay'), false)

class DemoScene extends Phaser.Scene {
    create () {
         // if you want to additionall remove the mouse Event listener
         // this.input.mouse.stopListeners()
         
         this.add.text(20, 130, 'Demooooooo' )
            .setScale(1.5)
            .setOrigin(0)
            .setStyle({fontStyle: 'bold', fontFamily: 'Arial'})
            .setDepth(100);
            
       // Just to for proof
       let helper = this.add.rectangle(20, 20, 400, 140, 0xff0000 )
        .setOrigin(0)
        .setDepth(1)
        .setInteractive();
       helper.on('pointerdown', e => console.info('from phaser'))
    }
}

var config = {
    width: 440,
    height: 180,
    transparent: true,
    // Set Parent HTML Node
    parent: 'game',
    scene: DemoScene,
    banner:false
}; 

new Phaser.Game(config);

console.clear();
document.body.style = 'margin:0;';

<script src="//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>

<div id="test_window" style="position:absolute; padding:.25em 1em; border: solid black; font-family:Arial">
    <!-- parent for phaser -->
    <div id="game" style="position:relative; border:1px solid green;z-index:50;pointer-events:none;">
    </div>
    <!-- overlay -->
    <div id="overlay" style="width:100px; height:50px; background-color:grey;position:absolute; top: 10px ; z-index:1000"> 
        OVERLAY
    </div>
    <!-- "underlay" -->
    <div id="underlay" style="width:100px; height:50px; background-color:lightgrey;position:relative; left:-10px; bottom: 100px ; z-index:1">
        UNDERLAY
    </div>
<div>

Info: You would have to open the browser developer console, to see the evnet message better.