I have a button that subscribes to the click event.
As soon as the click occurs I hide the button and I show a new one in the same position.
When I test this on desktop it works fine, but on mobile, it triggers the click event also on the second button.
Hit play and look in the console.
Click on the red button. It shows the blue button and prints “click 1”.
Then click on the blue button. It prints “click 2”.
On mobile, as soon as I touch the red button, it prints “click 1” and “click 2”.
Am I missing something? Or should I post an issue on github?
Click detecting must be kinda raycasting, since our elements are entities.
So, raycast recognize your click on red button and even when you enable blue, on blue.
I suspected the touch event was being propagated up to the mouse handler, so you were getting two clicks (a touch click and a mouse click). However, looking at the PlayCanvas code inside “element-input.js” it looks like it is invoking preventDefault, so I don’t have a complete explanation for you sorry.
Yes I did the same trick, and as you say is not the best.
I hope @vaios or @dave could give a look too.
I have a sequence of pages showing up after clicking a button in each page and now I have to apply the setTimeout to several of buttons.
The problem is that when you handle touchstart and touchend then Chrome seems to fire mousedown and mouseupafter the touchend event. You can try this yourself by doing something like this in any page:
document.body.addEventListener('touchstart', function () {console.log('touchstart', Date.now())})
document.body.addEventListener('touchend', function () {console.log('touchend', Date.now())})
document.body.addEventListener('mousedown', function () {console.log('mousedown', Date.now())})
document.body.addEventListener('mouseup', function () {console.log('mouseup', Date.now())})
Using the Developer tools in Chrome toggle the Device Toolbar and pick a mobile device, then refresh the page with the Developer tools open. Execute the code above in the Developer tools console and then try touching the page and release the touch after a while. You’ll see that mousedown is fired after the touch is released.
So in you case what happens is on touchend we fire the click event which disables the first button and enables the second button. Then mousedown is fired on the second button and then mouseup again on the second button which translates into a click event on the second button.
I’m not sure we can do something about that - handling it with a simple timeout in your code should fix it.
Thanks. I’ll give it a try. So if I’m understanding correctly chrome is trying to simulate mouse events on a touch device.
Wouldn’t be possible to force Playcanvas to ignore any mouse events in this case. By some settings?
This should resolve it.
Starting from your input I found that this is a common annoying issue.
So it seems that a possible solution could be to call event.preventDefault() on onTouchEnd event.
I tried in the repro and it works fine now
in the initialize I subscribe to touch end event:
// Only register touch events if the device supports touch
var touch = this.app.touch;
if (touch) {
touch.on(pc.EVENT_TOUCHEND, this.onTouchEnd, this);
}