移动端双击事件,h5模拟鼠标双击，zepto实现移动端双击事件

主要是移动端 双击会被看成是放大页面，而这个功能 做过h5的童鞋肯定知道 其实移动端是禁止放大 

那么直接的双击事件 就没有

1. 想到双击 肯定会有童鞋想到  jquery的 dblclick 事件  但问题是在移动端就不生效 那这个怎么办么

首先就是可以通过模拟来实现 

正常来说 只要第二次点击 和第一次点击的时间小于 300ms 就可以 看成是双击 那么就可以判断两次点击的 时间差 来实现了

通过setTimeout 来模拟实现了  这样的话可能会有延迟哈 

// 点击事件
        var clickid = 1;
        var timer = null;
        function a() {
            console.log('点击');
        }
        function b() {
            console.log('双击');
        }
        
        $('div').click(function() {
            if(clickid == 1) {
                startTime = new Date().getTime();
                clickid++;
                timer = setTimeout(function () {
                    a(); // 单击事件触发
                    clickid = 1;
                }, 300)
            }

            if(clickid == 2) {
                clickid ++ ;
            } else {
                var endTime = new Date().getTime();
                if ((endTime - startTime) < 300) {
                    b(); // 双击事件
                    clickid = 1;
                    clearTimeout(timer);
                }
            }
        })

我们看下实际效果哈

 

2. 第二种就可简单了 就是通过zepto 的 双击 事件 来快速 实现了

<script src="../js/zepto.js"></script>
    <script src="../js/event.js"></script>
    <script src="../js/touch.js"></script>

$('div').on('doubleTap', function() {
            console.log('双击');
        })
        $('div').on('tap', function () {
            console.log('单击');
        })

总结来说吧   

模拟的 有点延迟  效果肯定没有zepto的好  毕竟 touch 和 click 之间本来就有不小的延迟差

看你自己选择了     没必要为了一次双击就引入一个库  个人感觉 看你自己实际项目需要了 

关注我 持续更新前端知识