click-event/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Examples</title>
  <meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no'/>
  <!-- <meta name="viewport" content="user-scalable=no" /> -->
  <!-- <meta name="viewport" content="width=device-width" /> -->
  <!-- <meta name="viewport" content="initial-scale=1" /> -->
  <!-- <meta name="viewport" content="minimum-scale=1" /> -->
  <!-- 不行 -->
  <!-- <meta name="viewport" content="maximum-scale=1" /> -->
  <meta name="description" content="">
  <meta name="keywords" content="">
  <script src="./index.js" defer></script>
  <style>
    .btn {
      width: 200px;
      height: 200px;
      background: gray;
    }
  </style>
  <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
  <script>
    // VConsole will be exported to `window.VConsole` by default.
    var vConsole = new window.VConsole();
  </script>
</head>
<body>
  <h1>点击事件</h1>
  <div class="btn">点我</div>
  <p>
    移动端双击时触发的相关事件依次为：
    touchstart -> touchend -> mousedown -> mouseup -> click -> touchstart -> touchend -> mousedown -> mouseup -> click -> dblclick
  </p>
  <p>经测试，双击事件 dblclick 在PC端和移动端真机上可以触发(试过华为和苹果)， 但在 Chrome 开发者工具移动端模拟器里触发不了</p>
  <p>
    PC 端双击时触发的相关事件依次为：
    mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick
  </p>

  <p>
    移动端点击事件 300ms 延迟问题：
    产生原因：移动浏览器会在 touchend 和 click 事件之间，等待 300 - 350 ms，判断用户是否会进行双击手势用以缩放
    解决方案：禁用缩放（user-scalable=no）或设置width=device-width，不再需要 Fastclick 等第三方库
    推荐设置&lt;meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no'/>
  </p>
</body>
</html>