解决移动端点击响应速度慢的问题tap

问题：
移动端也有click事件，但在移动为了区分是滑动还是点击，click会延时300ms，用户体验差。
解决办法
（1）封装点击事件
原理：点击过程响应速度小于150ms；不能有滑动事件。具体实现如下：

 window.onload = function () {
     
        var bindTapEvent = function (dom, callback) {
            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;
            });
            /*dom.addEventListener('click',function () {
             //console.log('click');
             });*/
        }

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

（2）使用fastclick.js的插件

①在HTML页面中引入插件
注：必须在页面所有Element之前加载脚本文件先实例化fastclick

<script type='application/javascript' src='/path/to/fastclick.js'></script>

②在JS中添加以下代码：

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

如果你使用了JQuery，那么JS引入就可以改用下面的写法：

$(function() {
	FastClick.attach(document.body);
});

如果你使用Browserify或者其他CommonJS-style 系统,当你调用require('fastclick')时，FastClick.attach事件会被返回，加载FastClick最简单的方式就是下面的方法了：

var attachFastClick = require('fastclick');
attachFastClick(document.body);

解决移动端点击响应速度慢的问题tap

猜你喜欢