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

最新推荐文章于 2024-06-27 23:40:06 发布

正在输入代码中

最新推荐文章于 2024-06-27 23:40:06 发布

阅读量5.4k

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_26744901/article/details/50533916

版权

web前端专栏收录该内容

145 篇文章 0 订阅

订阅专栏

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

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

<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="jquery-1.7.2.js" type="text/javascript"></script>
    <script>
        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" οnclick="yc()">
            <div class="ts">
                我是浮层
            </div>
        </div>
    </div>
</body>
</html>

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

 window.addEventListener('load', function () {
            FastClick.attach(document.body);
        }, false);

加入以上代码即可

<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>

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