touch event delay - Githubissues

csigmanek commented 6 years ago

Description: We are trying to implement a click event when you touch an Element. Works perfectly in desktop, but has some serious issues in mobile. We tried it with different a-components. 1st: Click is executed on page load 2nd: You cannot click twice on the same element. You have to click on another element first before you can click on a clicked event again. 3rd: There is a delay of about 700 ms until the event fires. This is really serious, as we cannot prevent it.

A-Frame Version: 0.8.2
Platform / Device: iPad Air (safari mobile), Huawai Lite p8 (chrome mobile)

Reproducible Code Snippet or URL:

<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<style>
  html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
  }
</style>
</head>
<body>
<a-scene id="sc" cursor="rayOrigin: mouse">
  <a-camera id="camera" wasd-controls-enabled="false" cursor-visible="true" controls-enabled="false" look-controls-enabled="false" mouse-cursor-enabled="true"></a-camera>
  <a-box scale="4 4 4" id="s1" color="#FF0000" opacity="0.8" depth="2" position="0 0 -15"></a-box>
  <a-sky id="s2" color="#EDECEC"></a-sky>
</a-scene>
<script>
var scene = document.querySelector('a-scene')
 var run = function () {
  console.log('running')
  var test1 = document.getElementById('s1')
  test1.addEventListener('click', function () {
    alert('1')
  })
  console.log('test added1', test1)
}
if (scene.hasLoaded) {
  run()
} else {
  scene.addEventListener('loaded', run)
}
</script>
</body>
</html>

https://jsfiddle.net/xrpb7mqj/1/ https://jsfiddle.net/xrpb7mqj/1/embedded

pancakewaffles commented 6 years ago

I faced this problem before. Not sure if it has something to do with the click delay implemented in mobile browsers to distinguish different gestures. https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away

Instead of using 'click', I used 'mousedown'.

csigmanek commented 6 years ago

Mousedown works and the other two issues don't occur anymore when using mousedown. Thanks alot. Perhaps you should encourage everyone using mousedown only in aframe.

aframevr / aframe

touch event delay #3707