zoukankan      html  css  js  c++  java

  • 移动端点击事件延迟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.              80%;  
    18.             font-size: 50px;  
    19.             margin: 10% 0% 0% 10%;  
    20.             color: #fff;  
    21.         }  
    22.         .fu  
    23.         {  
    24.             min-height: 100%;  
    25.             min- 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.              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.              80%;  
    18.             font-size: 50px;  
    19.             margin: 10% 0% 0% 10%;  
    20.             color: #fff;  
    21.         }  
    22.         .fu  
    23.         {  
    24.             min-height: 100%;  
    25.             min- 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.              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 有冲突，维护多套代码很不容易
  • 相关阅读:
    Qt Create or VS 2015 使用 Opencv330 相机静态库链接错误如何解决？
    Qt create 如何构建 ActiveX 控件？
    VB 如何调用 c++ DLL？
    Opencv 330 如何裁剪图片中大的目标？
    Opencv 330 如何進行圖像的旋轉？
    Qt 开发 MS VC 控件终极篇
    Qt 5.9.4 如何静态编译和部署？
    图片理论基础
    iOS平台设置系统状态栏（通知栏、顶部状态栏）样式背景颜色或透明
    jQuery基础
  • 原文地址：https://www.cnblogs.com/telwanggs/p/6477571.html
Copyright © 2011-2022 走看看