tap事件

tap事件,也是轻击、轻触事件，其特点是响应速度快，在移动端也有click事件（在移动为了区分是滑动还是点击，click点击延时300ms），可这样影响用户体验，响应太慢了。为了解决这个问题，引入了tap事件

原理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background: pink;
            float: left;
        }
    </style>
</head>

<body>
    <div class="box"></div>

    <script>
        window.onload = function () {
            /*使用tap事件*/
            /*1. 响应的速度比click要快   150ms */
            /*2. 不能滑动*/
            // 封装tap事件
            var bindTapEvent = function (dom, callback) {
                /*事件的执行顺序*/
                /*在谷歌浏览器模拟看不到300ms的效果*/
                /*在真机上面才能看看到延时效果*/
                var startTime = 0;
                var isMove = false;
                dom.addEventListener('touchstart', function () {
                    startTime = Date.now();
                });
                dom.addEventListener('touchmove', function () {
                    isMove = true;
                });
                dom.addEventListener('touchend', function (e) {
                    console.log((Date.now() - startTime));
                    if ((Date.now() - startTime) < 150 && !isMove) {
                        callback && callback.call(this, e);
                    }
                    // 重置参数
                    startTime = 0;
                    isMove = false;
                });
            }

            bindTapEvent(document.querySelector('.box'), function (e) {
                console.log(this);
                console.log(e);
                console.log('tap事件')
            });
        }
    </script>
</body>

</html>

fastclick

fastclick的思路就是利用touch来模拟tap（触碰），如果认为是一次有效的tap，则在touchend时立即模拟一个click事件，分发到事件源（相当于主动触发一次click），同时阻止掉浏览器300ms后产生的click。

总的来说就是提供移动端click响应速度的

下载

fastclick

使用

<script src="../js/fastclick.min.js"></script>
<script>
    /*当页面的dom元素加载完成*/
    document.addEventListener('DOMContentLoaded', function () {
        /*初始化方法*/
        FastClick.attach(document.body);
    }, false);
    /*正常使用click事件就可以了*/
</script>