解决移动端click事件300ms延迟的问题

方法1、部分浏览器的<meta>标签加上width=device-width就能解决。

方法2、引入fastclick.js库

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>2.3 click 300ms延迟</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 300px;
            height: 300px;
            background-color: red;
            margin: 0 auto;
        }
    </style>
    <script src="js/fastclick.js"></script>
    <script>
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        }
    </script>
</head>
<body>
    <!-- 原因
        double click 双击
    解决办法
        fastclick -->
    <div id="box" class="box"></div>

    <script src="http://192.168.1.5:1337/vorlon.js"></script>
    <script>
        var boxEl = document.getElementById('box');
        var startTime = 0;
        boxEl.addEventListener('touchstart', function () {
            startTime = Date.now();
            console.log('touchstart');
        }, false);
        boxEl.addEventListener('click', function () {
            console.log('click');
            console.log(Date.now() - startTime);
        }, false);
    </script>
</body>
</html>

 

posted @ 2019-10-09 17:41  是桂  阅读(319)  评论(0)  编辑  收藏  举报