解决移动端点击事件延迟300ms

最新推荐文章于 2024-10-05 10:44:18 发布

Tony3820

最新推荐文章于 2024-10-05 10:44:18 发布

阅读量1.4w

点赞数 1

分类专栏： wap框架开发移动端h5页面文章标签： ios android h5

本文链接：https://blog.csdn.net/xdongll/article/details/51908994

版权

移动端h5页面同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

wap框架开发

9 篇文章 0 订阅

订阅专栏

说明：移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。

以下是历史原因，来源一个公司内一个同事的分享： 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。

//解决方案： fastclick可以解决在手机上点击事件的300ms延迟 zepto的touch模块，tap事件也是为了解决在click的延迟问题

一、tap.js解决方案

<script src="tap.js"></script>

<div id="container">
  <button id="button-1">Click event</button>
  <button id="button-2">Tap event</button>
</div>

<div id="output"></div>

<script>
  var container = document.getElementById('container')
  var button1 = document.getElementById('button-1');
  var button2 = document.getElementById('button-2');
  var output = document.getElementById('output');

  var tap = new Tap(container);

  button1.addEventListener('click', callback, false);
  button2.addEventListener('tap', callback, false);

  function callback (e) {
      e.preventDefault();
      var p = document.createElement('p');
      p.textContent = 'event: ' + e.type;
      output.insertBefore(p, output.firstChild);
  }
</script>

二、fastclick.js解决方法

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        *
        {
            margin: 0;
        }
        body
        {
        }
        .button
        {
            background-color: #3d3d3d;
            border: 0px;
            height: 80px;
            width: 80%;
            font-size: 50px;
            margin: 10% 0% 0% 10%;
            color: #fff;
        }
        .fu
        {
            min-height: 100%;
            min-width: 100%;
            background-color: Black;
            background: rgba(0,0,0,0.4);
            position: absolute;
            top: 0;
            text-align: center;
            display: none;
        }
        .ts
        {
            margin: 8% auto;
            width: 400px;
            height: 400px;
            top: 59%;
            background-color: #fff;
            text-align: center;
        }
    </style>
    <script src="fastclick.js" type="text/javascript"></script>
    <script src="jquery-1.7.2.js" type="text/javascript"></script>
    <script type="application/javascript">
        window.addEventListener('load', function () {
            FastClick.attach(document.body);
        }, false);
        function xian() {
   
            $(".fu").show().hide(350);
        }
    </script>
</head>
<body>
    <div>
        <div class="but">
            <input class="button" type="button" value="点击我" οnclick="xian()" /></div>
        <div class="fu" >
            <div class="ts">
                我是浮层
            </div>
        </div>
    </div>
</body>
</html>