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

说明:移动设备上的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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值