How to change input mouse manager target?

Phaser 3
1

All mouse inputs are bound to the canvas by default, but I saw in documentation that you can change the target to be any other DOM element.

You can change in the config:
https://photonstorm.github.io/phaser3-docs/Phaser.Core.Config.html#inputTouchEventTarget__anchor

And you can change in mouse manager:
https://photonstorm.github.io/phaser3-docs/Phaser.Input.Mouse.MouseManager.html#target__anchor

I tried but nothing happened. I don’t want to have a canvas for input listener I want to have DOM that phaser creates if you enable dom in config: dom:{createContainer: true}.

The reason I want to change this is when you are using DOM for UI and hover with the mouse over some div, the game will not detect mouse move on canvas because DOM is at the top and if I add custom eventLisenter for mousemove than mouse x and y are not correct because phaser is scaling, using camera etc and i just cant find the right formula to calculate that.

2

I found a solution, for anyone that needs it this will work, in config just add input settings, enable dom, and parent, as this mouse event will not be on canvas but parent div named app, it is very handy if you are using HTML/CSS for UI.

	var game = new Phaser.Game({
		parent: 'app',
		input:{
			mouse:{
				target:"app"// or target:document.getElementById("app") 
			}
		},
		dom:{
			createContainer: true
		}
	});

The problem was i was using keyword inputMouseEventTarget because that is written in documentation as parameter instead of the keyword target

1 Like
3

For these things make sure you look in Phaser.Types.Core.GameConfig and not Phaser.Core.Config.

2 Likes
4

okay, that’s documentation is much clearer to understand, thank you!