Fork me on GitHub

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

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

补充:android手机上click事件没有延迟现象,能够立即触发 

tap事件原生是没有的,如果不想封装的话可以用touchend事件代替,当然这样做的话滑动的时候也会可能触发得到,最好还是封装一下,或用iscroll,zepto之类的库,我的另一篇文章也有一个完整的封装tap和swipe手势的组件代码。

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

 

测试代码(注:使用iphone手机来测试ios7~ios9,在android下我的测试机型没遇到这个问题)

 

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); })

 

posted @ 2016-02-01 00:56  枫之物语  阅读(1318)  评论(1编辑  收藏  举报