Question

In order to track users' clicks, I attach a touchend event handler to window to delegate all click events. I prefer touchend than click because the targe of TouchEvent never changes from start to end/cancel.

It's strange that some click is not tracked in this way.

I've learned that both TouchEvent and MouseEvent would be fired on a touch screen device.

MouseEvent can be fired if TouchEvent is not prevented. And the relative events touchstart, touchmove, touchend, mouseover, mousemove, mousedown, mouseup, click are triggered sequentially.

However if components were tapped very quickly and lightly, only MouseEvents were fired.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.bootcss.com/eruda/1.4.4/eruda.js"></script>
  <script>eruda.init();</script>
  <title>Document</title>
</head>
<body>
  <div id="touch">touch test</div>
  <script>
    var $touch = document.getElementById('touch');
    
    [
      'touchstart',
      'touchmove',
      'touchend',
      'mouseover',
      'mousemove',
      'mousedown',
      'mouseup',
      'click'
    ].forEach(e => $touch.addEventListener(e, () => console.log(e)))
  </script>
</body>
</html>

Device info: Android 6, Chrome 66.

Why TouchEvent is not fired before MouseEvent in some case?

0 个答案: