移动端触屏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下我的测试机型没遇到这个问题):
补充: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); })
相关文章推荐
- Android学习路线
- Android问题解决记录—android.content.res.Resources$NotFoundException: Unable to find resource ID
- 移动端开发测试,手机如何绑定指定Host
- Android 判断签名MD5——防止二次打包
- unity document web link
- Android activity_main.xml文件中的FrameLayout
- Android 一张图理解getWidth和getMeasuredWidth
- android:gravity与android:layout_gravity
- Android Studio JNI开发
- android框架
- iOS数据类型转换。
- 赤兔安卓版语音图片资料处理
- php-5.5.1-android.patch.v3
- cBPM-android - Code::Blocks环境搭建
- viewpager切换动画
- MindMapper中的主题怎样快速选择
- 选择蜂窝教育Android培训 成就未来
- Android调用默认浏览器打开指定Url的方法实例
- Android NDK and pthread
- Building apps for Firefox OS