您的位置:首页 > 移动开发

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

2016-02-01 00:56 615 查看
在移动端 触屏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);

})
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: