Mouse Events not working on machines with a touchscreen

Help & Support
1

Hi,

I create a button inside my scene using a 2d Screen and added mouse events to it:

this.entity.element.on('mouseenter', this.onEnter, this);
this.entity.element.on('mousedown', this.onPress, this);
this.entity.element.on('mouseup', this.onRelease, this);
this.entity.element.on('mouseleave', this.onLeave, this);

Works perfectly on most of the machines, but if a machine has touchscreen and is running Windows 10 and Chrome/Firefox the event are never triggered. (Touch events do work).

Does anyone has a solution or workaround for this problem?

Thanks!

2

Hey! You have to use touch events for that.

Check this: https://developer.playcanvas.com/en/tutorials/basic-touch-input/

3

I already have touch events in place for mobile devices.

The problem is that this are computers with touch screens not tablets so the users doesn’t want to use the touch screen, they want to use mouse and keyboard.

4

I see, didn’t catch it with the first read. This might not be playcanvas related but a javascript polyfill might be required.

Playcanvas input events just wrap the browser/javascript default events.

5

Ah, this is on the elements. @vaios one for you?

6

Yeah we might have to change that…

7

Any news on the change?

8

Hi,

We pushed a fix for this here https://github.com/playcanvas/engine/commit/a6536735fcd0e177f59efb14a31efce78311146d . This hasn’t been deployed to production yet but you can test it out in the launch page by appending this query parameter to the URL:

?use_local_engine=https://code.playcanvas.com/playcanvas-latest.js

9

Works perfectly! Thanks :slight_smile:
When is the next deploy?

10

We deployed the changes - let us know if you have any more problems.

11

Stumbled over this thread as I have a problem with touch input on windows. My problem is that the mouseup event is fired as soon as you move your finger on the screen. This makes drag/scroll functionalities impossible.

Heres a video showing the issue ( mousedown enables the box, mouseup disables it): https://youtu.be/2M8vLKFiVtE

Link to the sample project: https://playcanvas.com/project/554689/overview/touch-test

12

That looks like the browser click event being fired on touch up.

Normally, I register for touch events if touch is available and call preventDefault(); to prevent the click event from firing.

Code is super rough but you get the idea: https://playcanvas.com/project/554707/overview/touch-test-from-forums

13

Thanks for your reply! Did some test across a few browsers, touch input support seems to be incosistent:

Chrome: detects touch device, touch works fine, mouse input doesn’t work no more

Firefox: detects touch device, touch doesn’t work but fires mousdown and mouseup immediately, mouse input works fine

Edge: doesn’t detect touch device, touch fires mousedown and as soon as you move on the screen mouseup, mouse input works fine

IE11: same as Edge

14

Were those results from my link? Chrome worked fine for me. :confused:

Edit: Just tried in Edge as well, works fine there too :thinking:

15

Chrome works fine if there is no touch device. If there is one, only touch works.

Using Surface Pro 4 with Windows 10 to test touch support btw.

16

How odd, I’ve got a similar 2 in 1 device and don’t have the same issues with my fork :thinking:

17

Pointer events are not supported in playcanvas right?

18

Not through the engine itself but you can still listen for them via the document.

Just tried Firefox as well on my fork here: https://playcanv.as/p/tQbScGWn/ That works as expected.

It’s REALLY odd that you are experiencing something completely different.

19

Thanks for your time! Pointer evnets work like a charm on Firefox, it doesn’t solve the touch-drag issue on Edge and IE11 though.

BUT I actually got a working solution in IE11 by setting -ms-touch-action: none on the document body. Makes touch-drag useable for both mousedown and pointerdown!

Will investigate further tomorrow :slight_smile:

20

Out of interest, do you have any other mouse/touchpad software installed on your device? Some sort of utility that helps touchpad users navigate the desktop like a mouse for example?