微信浏览器触摸事件流程

目前只在微信浏览器测试了,iOS无问题,部分Android有下面这个问题

正常在微信浏览器里面点击的时候会触发 touchstart -> touchend
滑动的时候会触发 touchstart -> touchmove -> touchend

但是当我在touchstart中调用了preventDefault时,点击的流程很大概率(不是100%)会变成 touchstart -> touchmove -> touchend,这是为什么?
麻烦熟悉浏览器内核代码的高手帮忙解释下,跪谢 ORZ

demo

源码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0,width=device-width,maximum-scale=1.0, user-scalable=0,minimum-scale=1.0"/>
  <title>demo</title>

  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="demo">
    <div style="height: 200px; background-color: #cd4b42;">slider1</div>
    <div id="log"></div>
  </div>
  <script>
    var $log = document.querySelector('#log');
    var log = function(str) {
      var $l = document.createElement('p');
      $l.innerText = str;

      $log.children.length
        ? $log.insertBefore($l, $log.children[0])
        : $log.appendChild($l);
    };

    var $demo = document.querySelector('#demo');
    $demo.addEventListener('touchstart', function(e) {
      log('touchstart');
      // 可以将下面代码注释掉看看
      e.preventDefault();
    });

    $demo.addEventListener('touchmove', function() {
      log('touchmove');
    });

    $demo.addEventListener('touchend', function() {
      log('touchend');
    });

    $demo.addEventListener('click', function() {
      log('click');
    });
  </script>
</body>
</html>
阅读 4.3k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题