Html5 detect mouse move out of canvas

#1

Hello,

in html5 target is-it possible to detect mouse move out of canvas element ?

import openfl.display.Sprite;
import openfl.events.Event;
import openfl.events.MouseEvent;

class Main extends Sprite
{
	public function new()
    {
        super();
		
		var sprite:Sprite = new Sprite(); 
		sprite.graphics.beginFill(0xFF0000);
		sprite.graphics.drawRect(0, 0, 100, 100);
		sprite.graphics.endFill();
		sprite.x = sprite.y = 100;
		sprite.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
		sprite.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
		this.addChild( sprite );
    }
	
	private function onMouseDown(event:MouseEvent):Void
	{
		stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
	}
	
	private function onMouseMove(event:MouseEvent):Void
	{
		trace( event.localX );
	}
	
	private function onMouseUp(event:MouseEvent):Void
	{
		stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
	}
}

<window width="400" height="400" orientation="portrait" background="0x00ff00" />

The mouse is not detectable when is out of canvas (400px)

Thanks

#2

You can detect mouse leave, but you are right there are no events fired when moving mouse outside of canvas.

stage.addEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);

You might have to use externs with JQuery or another DOM library for full mouse positioning. https://api.jquery.com/mousemove/

1 Like
#4

It’s strange it work outside canvas on mobile but not on desktop.
It work too when I simulate a phone on Chrome desktop Developer Tools ?