Aframe: Touch causes "click" to be called twice

[ravisreelalan]

On touch enabled devices, tapping the screen causes the click event to be called twice - once due to a TouchEvent and once due to a MouseEvent. Need a mechanism to fire only 1 event.

click/touch the red sphere in -
http://asc-702-ubuntuvm.main.ad.rit.edu/VR/electrostatics/index.html

Click causes single change of color. Touch causes 2 changes.

[ngokevin]

Thanks for filing!

[Kezzsim]

So I don't foresee this being 'fixed' anytime soon, thankfully with a little user patience it can be avoided~

So if you have control over the listener method, like if you register a cursor-listener method yourself you can make a boolean globally for the dom's overall click method to have it wait a few seconds before setting that boolean to true and allowing your methods to execute:

var isDelayed = false;
  $("html").on("click", function() {
    setTimeout(function() {
      isDelayed = true;
    }, 1000)
if (isDelayed) {
 //execute
}

In other circumstances, like on a page where we use the A-Frame Link component you can affect object attributes such that they won't double click and misbehave. Link has an on prop which defaults to click:

link.setAttribute('link', {
 "href": "#",
 "title": marker,
 'image': preview,
 'on': "blah"
 });
setTimeout(function() {
 link.setAttribute('link', {
 'on': "click"
 });
 }, 1000);

Users who like to click frantically might panic, but most won't notice the subtle delay that waits just long enough to prevent A-Frame Mobile's invisible thumb from clicking on it

[wmurphyrd]

@kezzsim you're seeing this still in 0.8.0? I thought I had fixed this one

[Kezzsim]

Oh, Gyro is still broken in 0.8.0 on Mobile Chrome 65 with the current release (https://rawgit.com/aframevr/aframe/c4aa63e/dist/aframe-master.min.js)
So we had to roll back to 0.7.1 to get that functionality.

If you have a more elegant solution that can be implemented in 0.7.1 for the time being it would be greatly appreciated, as currently with links this only works a small portion of the time - it appears mobile chrome has a really hard time adding the on click attribute after the object is initialized.

You can see what I've been working on here to get an idea, I want it to spawn a link entity after clicking on one of those rectangles - but on mobile it normally clicks twice and doesn't give the user any time to look at the preview link, for now I've added the interval which prevents that from happening but now most times on Mobile I can't get it to click at all...

[Delidragon]

Any progress? Or new ideas for a workarounds?

[dmarcos]

@Kezzsim Can you still reproduce with Chrome m66+ / A-Frame 0.8.2 ?

[ngokevin]

This should still be an issue since cursor listens to both mouse + touch.

[dmarcos]

I can't reproduce this anymore. Android m71 does not fire MouseEvents when tapping the screen. I only see one TouchEvent (touchstart)

[dmarcos]

This does not reproduce anymore in master: https://cdn.jsdelivr.net/gh/aframevr/aframe@98d539057a452f4181b9856d21487bde1fc636ca/dist/aframe-master.min.js

Closing but can reopen if you can provide an example that breaks with build above.

[khlevon98]

Hi guys, in aFrame 0.8.2 this problem was fixed, but in aFrame 0.9.0 this problem exists. When you first time touch on cube it trigger click event twice, in second time it calls once, but when you move scene and have registered mouseleave event, after that wen you click on cube it again calls click event twice, you can test it in this example

https://codepen.io/khlevon98/full/GzObKR

[dirkk0]

A similar behaviour seems to occur in the Oculus Browser on the Quest with A-Frame 1.0.4.
Here's a demo and a workaround similar to the one @Kezzsim provided.
https://curious-electric.com//w/experiments/aframe/minimal-quest-event-bug/

I am not sure if i should file another bug or if this is really related.

[rowbottomn]

On 1.0.4 on iOS, click even triggers sound twice.