Stopping event propagation in GUI overlay.

[paperElectron 3]

Hey all, I'm currently building a UI layer for a multiplayer game I am working on, and cant seem to stop events from propagating to the canvas layer.

 

My Html structure (In jade), places all of the elements inside a relatively positioned container, with all of the child elements absolutely positioned and z-indexed above the #game container. All of the gui layers are display: none, and I have several methods available to call out of the game to display them. All of this works well and good, but any events I attach to these DOM objects propagate down to the canvas, even with stopPropagation() and stopImmediatePropagation() called on the event.

 

.gameContainer    .gui#resources      .guiInner.white        h1 Main    .gui#console      .guiInner        ul#chatList.list-unstyled      .chatInput        input#consoleInput(type="text")    .gui#settings      h1 Settings    .alert#alert    #game

My in game GUI buttons are simply Phaser buttons that call out of the game to my GUI class. My event handlers are standard jQuery event handlers.

//Phaser GUI buttontoggleGui = this.game.add.button(900, 600, "button", GameObjects.Gui.showResourceGui, this, 0, 1, 2);//Event handler outside Phaserchild.mouseup(function(e) {  this.hide("fade", function() {    return this.remove();  });  return e.stopPropagation();});

Any Ideas? I pretty much want to stop all Phaser events while the GUI overlay is up.

[rich 2610]

You can disable Phaser input like this:

game.input.disabled = true;

.. and then just turn it back on again as you need it.

[paperElectron 3]

game.input.disabled = true;

.. and then just turn it back on again as you need it.

I swear I looked at the docs for more than 30 seconds. Apparently I was looking for the most complicated answer.

[naveen 1]

What if the overlay has buttons?

 

game.input.disabled = true, will stop all the game input.

 

How can we disable input for particular group?

[mxmlb 9]

The buttons in this overlay will still work because it is an HTML overlay. 

Of course, if you have a custom display object in Phaser as an overlay, you can't disable all the input; but as your buttons will catch the phaser events, it won't reach another object behind the overlay.