zepto延迟300s

最新推荐文章于 2018-03-08 23:03:17 发布

mystraight

最新推荐文章于 2018-03-08 23:03:17 发布

阅读量1.3k

点赞数

分类专栏：混合app开发文章标签：移动端点击事件延迟

本文链接：https://blog.csdn.net/qq_35568483/article/details/53054678

版权

混合app开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!doctype html>

<head>
    <meta charset="utf-8" />
    <title>zepto延迟</title>
    <script src="http://zeptojs.com/zepto.js"></script>
    <style type="text/css">
        .div1{
            background: red;
            width: 400px;
            height: 400px;
        }
        .div2{
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        .div3{
            background: blue;
            width: 400px;
            height: 400px;
        }
        .div4{
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        .div5{
            background: yellow;
            width: 400px;
            height: 400px;
            position: relative;
        }
        .div6{
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    <div class="div6"></div>


    <script>
        $('.div1').on('click',function(){
            $('.div2').text("这个是有延迟的click");
        });
        $('.div3').on('touchstart',function(){
            $('.div4').text("这个是无延迟的touchstart");
        });
        $('.div5').on('touchstart',function(){
            $('.div6').text("你的手指放上来了");
        });
        $('.div5').on('touchend',function(){
            $('.div6').text("你的手指离开了");
        });
        $('.div5').on('click',function(){
            $('.div6').text("我被点击了");
        })
        //在手机中测试会比较明显，click会延迟300ms，而touch不会。。。产生原因是因为zepto双
        //击的时候会在移动端页面会放大，你可以试下在手机中双击第一块，会发现放大后第二块才出
        //现字体，而第三块双击，会在第四块上同时出现字体。这就是坑一

        //点击第五块，会发现第六块先出现 手指放上去了-》手指离开了-》被点击了
        //但是如果，你点击第五块过了300ms才离开，那就只显示 手指放上去-》 手指离开了。
        //如果你在ios中的safari中测试，会更明显看到touchend后会触发click

        //这就是所谓的产生延迟300ms，zepto在写touch的时候会有个300ms判断，超过了300ms才算touch，否则算点击，
        //这是因为双击放大的原因，这300ms就是为双击放大预留的，解决办法有几种，用tap代替click，或者写阻止实践。




    </script>
</body>

mystraight

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
zepto延迟300s

<!doctype html><head> <meta charset="utf-8" /> <title>zepto延迟</title> <script src="http://zeptojs.com/zepto.js"></script> <style type="text/css"> .div1{ background:
复制链接

扫一扫

专栏目录