移动端点击事件延迟300毫秒

快速响应是所有UI都需要注意的一点，研究证明:当延迟超过100毫秒，用户就能感受到界面的卡顿。然而出于对手指触摸滑动的区分，移动端页面对于触摸事件会有300毫秒的延迟，导致多数用户感觉移动设备上基于html的web应用界面响应速度慢。

例1：在手机端运行该页面，点击按钮，会明显感觉比较慢

 

[html] view plain copy
 
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3.     <title></title>  
  4.     <style>  
  5.         *  
  6.         {  
  7.             margin: 0;  
  8.         }  
  9.         body  
  10.         {  
  11.         }  
  12.         .button  
  13.         {  
  14.             background-color: #3d3d3d;  
  15.             border: 0px;  
  16.             height: 80px;  
  17.             width: 80%;  
  18.             font-size: 50px;  
  19.             margin: 10% 0% 0% 10%;  
  20.             color: #fff;  
  21.         }  
  22.         .fu  
  23.         {  
  24.             min-height: 100%;  
  25.             min-width: 100%;  
  26.             background-color: Black;  
  27.             background: rgba(0,0,0,0.4);  
  28.             position: absolute;  
  29.             top: 0;  
  30.             text-align: center;  
  31.             display: none;  
  32.         }  
  33.         .ts  
  34.         {  
  35.             margin: 8% auto;  
  36.             width: 400px;  
  37.             height: 400px;  
  38.             top: 59%;  
  39.             background-color: #fff;  
  40.             text-align: center;  
  41.         }  
  42.     </style>  
  43.     <script src="jquery-1.7.2.js" type="text/javascript"></script>  
  44.     <script>  
  45.         function xian() {  
  46.             $(".fu").show().hide(350);  
  47.         }  
  48.     </script>  
  49. </head>  
  50. <body>  
  51.     <div>  
  52.         <div class="but">  
  53.             <input class="button" type="button" value="点击我" onclick="xian()" /></div>  
  54.         <div class="fu" onclick="yc()">  
  55.             <div class="ts">  
  56.                 我是浮层  
  57.             </div>  
  58.         </div>  
  59.     </div>  
  60. </body>  
  61. </html>  

 

例2：使用了 FastClick是一个非常方便的库,在移动浏览器上发生介于轻敲及点击之间的指令时,能够让你摆脱300毫秒的延迟,而且使用起来非常方便

 

[html] view plain copy
 
  1. window.addEventListener('load', function () {  
  2.            FastClick.attach(document.body);  
  3.        }, false);  

加入以上代码即可

 

 

 

[html] view plain copy
 
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3.     <title></title>  
  4.     <style>  
  5.         *  
  6.         {  
  7.             margin: 0;  
  8.         }  
  9.         body  
  10.         {  
  11.         }  
  12.         .button  
  13.         {  
  14.             background-color: #3d3d3d;  
  15.             border: 0px;  
  16.             height: 80px;  
  17.             width: 80%;  
  18.             font-size: 50px;  
  19.             margin: 10% 0% 0% 10%;  
  20.             color: #fff;  
  21.         }  
  22.         .fu  
  23.         {  
  24.             min-height: 100%;  
  25.             min-width: 100%;  
  26.             background-color: Black;  
  27.             background: rgba(0,0,0,0.4);  
  28.             position: absolute;  
  29.             top: 0;  
  30.             text-align: center;  
  31.             display: none;  
  32.         }  
  33.         .ts  
  34.         {  
  35.             margin: 8% auto;  
  36.             width: 400px;  
  37.             height: 400px;  
  38.             top: 59%;  
  39.             background-color: #fff;  
  40.             text-align: center;  
  41.         }  
  42.     </style>  
  43.     <script src="fastclick.js" type="text/javascript"></script>  
  44.     <script src="jquery-1.7.2.js" type="text/javascript"></script>  
  45.     <script type="application/javascript">  
  46.         window.addEventListener('load', function () {  
  47.             FastClick.attach(document.body);  
  48.         }, false);  
  49.         function xian() {  
  50.      
  51.             $(".fu").show().hide(350);  
  52.         }  
  53.     </script>  
  54. </head>  
  55. <body>  
  56.     <div>  
  57.         <div class="but">  
  58.             <input class="button" type="button" value="点击我" onclick="xian()" /></div>  
  59.         <div class="fu" >  
  60.             <div class="ts">  
  61.                 我是浮层  
  62.             </div>  
  63.         </div>  
  64.     </div>  
  65. </body>  
  66. </html>  


例3：可以使用zepto.js的tap事件替代click，Zepto 缺少合适的高度计算函数，在项目开发中发现第三方插件和 Zepto 有冲突，维护多套代码很不容易

posted @ 2017-02-28 10:11  疯子110  阅读(550)  评论(0)  编辑  收藏  举报