Gamepad plugin: a touch on the controls still reaches the game as a hover (pointerover / pointerenter) #1805

What happens

A touch that starts on one of the on-screen controls still reaches the game as a hover. A UIBaseElement under the button gets onOver, though the README says "a touch that starts on the controls does not reach the game".

Found in the Alex 4 example on an iPhone, and reproduced in Chromium with touch emulation. On the title menu, the B button sits over the "SOUND" line. Pressing B moves the menu arrow to that line, because MenuItem.onOver points at it.

Why

plugin.ts listens in capture on the canvas parent to pointerdown, pointermove, pointerup and pointercancel (POINTER_EVENTS), and consumes the ones that belong to its controls. A touch also fires pointerover and pointerenter, right before pointerdown, and pointerout and pointerleave after pointerup.

melonJS listens to those too (POINTER_OVER, POINTER_ENTER and POINTER_LEAVE in input/pointerevent.ts). They get through, and the engine sends a pointerenter to the region under the finger.

Suggested fix

Also listen to pointerover, pointerenter, pointerout and pointerleave in capture:

• consume them when the pointer is on a control (the controlAt(x, y) test that pointerdown uses);
• or consume them when the pointer is one the plugin holds (for out and leave).

The touch then never reaches the game.

Workaround in a game

Ignore hovers from touches, since a finger has no hover:

override onOver(event?: Pointer) {
	const e = event?.event;
	if (!(e && "pointerType" in e && e.pointerType === "touch")) {
		this.point();
	}
}