Phaser, input, dom, and contextmenu

[dotJayEss]

I have been working with Phaser for a few months, and have started to use it in an application I am building and am running into an issue most likely tied to my ignorance of how Phaser events are implemented. I come from a web development background, and I feel my understanding of the dom and it's events are muddying my understanding of Phaser eventing. Before stepping through the input source I wanted to ask for help here to hopefully shed some light on my issue.

General

• All events originate from the DOM, yet the DOM event is never passed for manipulation to the handler, why is this?
• Is there any way to get reference to the dom event in a given handler?
• Is there a reliable way to prevent the default behavior of an event?
• I am aware of the priorityID to control event priority and this has solved most of my use cases until now but it really only gives me control over bubbling and delegation.
• I also found the capture property on the mouse object but setting it to true does not appear to have effect on my issue. 

My Issue: Unable to prevent the default behavior of 'contextmenu' event in Phaser 2.4.4

• My app has need to display a custom context menu over the canvas on right click, so I need to prevent the default behavior of the dom 'contextmenu' event
• I have tried setting a function to the game.canvas.oncontextmenu property, the function is never called and native context menu is shown
• I have tried selecting the canvas from the dom and adding an event listener to the contextmenu event, the handler is never raised and native context menu is shown
• I have even tried selecting the canvas' parent element from the dom and adding an event listener, handler is never raised and native context menu is shown
• I can select any element in my app phaser is unaware of and use this basic dom capability to assign the contextmenu event handler
• I can select the canvas or it's parent and bind to other dom events such as 'mousedown'

So right now I am lost. Is there some kind of monkey patching going on with phaser and the events of dom elements it is aware of? I simply need to be able to prevent the default behavior of the 'contextmenu' dom event so the user is shown my custom menu and not the native browser context menu. Any advise or insight is greatly appreciated.

Browser: Chrome, Phaser Version: 2.4.4, OSX

[dotJayEss]

My current workaround for this issue is to bind to the contextmenu event of a wrapper div which wraps the wrapper div I pass to Phaser by id.

Example DOM:

<div id="wrapper">
  <div id="game">
    <canvas></canvas>
  </div>
</div>

• I pass the id 'game' to phaser, the canvas is injected by phaser.
• Attaching event handlers to #game or canvas element 'oncontextmenu' does nothing. Handler is never called.
• Attaching event handlers to #wrapper works as expected.

I would greatly appreciate any insight into why this is needed, or if I have found a bug I would gladly submit an issue/PR for a fix.

[Kazrian]

I realize this is an old issue but this actually should work in your situation I think:

In the create() function passed as a callback to the Phaser.Game constructor, (as part of the state parameter) add this:

this.game.canvas.oncontextmenu = function (e) { e.preventDefault(); }

Seems to work for me.