web 移动端click点击延迟解决方案

2020年7月5日作者张舫

移动端click事件会有300ms的延时,原因是移动端屏幕双击会缩放(double tap to zoom)页面

解决方案

1.禁用缩放.浏览器禁用默认的双击缩放行为并且渠道300ms的点击延迟

<meta name=viewport" content="user-scalable=no">

1	<meta name=viewport" content="user-scalable=no">

2.利用touch事件自己封装这个事件解决300ms延迟(了解即可)

原理解释

当我们手指触摸屏幕,会记录当前触摸时间
当我们手指离开屏幕,用离开的事件减去触摸的事件
.如果事件小于150ms,并且没有滑动屏幕,那么我们就定义为点击

function tap(object, callback) {
    var isMove    = false;
    var startTime = 0;
    
    //监听触摸下的事件
    object.addEventListener('touchstart', function (event) {
        startTime = Date.now();
    })
    
    //监听触摸移动事件
    object.addEventListener('touchmove', function (event) {
        isMove = true;
    })
    
    //监听触摸离开的事件
    object.addEventListener('touchend', function (event) {
        //必须满足 手指停留时间 < 150 并且没有处罚移动事件 
        if (!isMove && (Data.now() - startTime) < 150) {
            callback && callback()
        }
        isMove    = false;
        startTime = 0
    })
}

function tap(object, callback) {

var isMove = false;

var startTime = 0;

//监听触摸下的事件

object.addEventListener('touchstart', function (event) {

startTime = Date.now();

})

//监听触摸移动事件

object.addEventListener('touchmove', function (event) {

isMove = true;

})

//监听触摸离开的事件

object.addEventListener('touchend', function (event) {

//必须满足手指停留时间 < 150 并且没有处罚移动事件

if (!isMove && (Data.now() - startTime) < 150) {

callback && callback()

}

isMove = false;

startTime = 0

})

}

3.使用fastclick.js https://github.com/ftlabs/fastclick

原生js应用

<script type='application/javascript' src='/path/to/fastclick.js'></script>
<script>
    if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function() {
            FastClick.attach(document.body);
        }, false);
    }
</script>

if ('addEventListener' in document) {

document.addEventListener('DOMContentLoaded', function() {

FastClick.attach(document.body);

}, false);

}

</script>

jQuery这样使用

<script type='application/javascript' src='/path/to/jquery.js'></script>
<script type='application/javascript' src='/path/to/fastclick.js'></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>

				
					
				1
2
3
4
5
6
7

						<script type='application/javascript' src='/path/to/jquery.js'></script>
<script type='application/javascript' src='/path/to/fastclick.js'></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>

					

			

关于作者

张舫

好好学习天天向上