移动端触屏click点击事件延迟问题，以及tap的解决方案

Posted 2020-06-12

在移动端 触屏click事件虽然也会响应，但是总感觉是有延迟，一直听说click事件在手机上有200~300毫秒的延迟问题，亲自测了一下，在pc端模拟手机的话是测不出来的，但是用手机测试时发现延迟非常明显，用我的iphone5执行下段测试代码，平均延迟在370毫秒！结果非常惊人，所以在移动端必须得用tap事件了，click不仅仅是慢的问题，而且会严重影响css3动画！没错，这绝对是真的，我做的单页应用，用click事件执行的，点击后css3切换动画，经常会出现动画被省略掉直接到最后一个keyframe，之前一直怀疑是click有问题，在我用自己封装的tap事件替代click之后，css3动画立即变得无比的流畅，再没出现过掉帧现象。tap事件原生是没有的，如果不想封装的话可以用touchend事件代替，当然这样做的话滑动的时候也会可能触发得到，最好还是封装一下，或用iscroll,zepto之类的库，我的另一篇文章也有一个完整的封装tap和swipe手势的组件代码。

传送门：通过html5 touch事件封装手势识别组件

 

测试代码(注：一定要用手机来测试）：

 

var start,end;
 
$(document.body).append($("<a href=‘javascript:‘ id=‘btn_test‘>test</a>"));          
$("#btn_test").bind("touchend",function(){
                
                start=new Date();
 })
 $("#btn_test").bind("click",function(){
                end=new Date();
                alert(end-start);
                
})