在移动端 触屏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); })

移动端触屏click点击事件延迟问题,以及tap的解决方案的更多相关文章

  1. 移动端触屏滑动,JS事件

    先了解下 移动端的触屏滑动 毕竟这玩意其实和PC端还是有一定的区别的 hh 整理了下网上的资料放一放 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等 ...

  2. js移动端触屏事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  3. Hammer.js移动端触屏框架的使用

    hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...

  4. JS的Touch事件们,触屏时的js事件

    丫的,终于找到了JS在平板电脑上的事件!!!   iphone.ipod Touch.ipad触屏时的js事件   1.Touch事件简介   pc上的web页面鼠标会产生onmousedown.on ...

  5. JS案例之5——移动端触屏滑动

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  6. fastclick.js解决移动端(ipad)点击事件反应慢问题

    参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 ...

  7. IOS - Safari中click点击事件无效

    做web移动端页面时,安卓端一点问题也没,发现在ios真机上点击事件无效,发现Safari下只有默认可点击的元素才click点击事件,像span div等元素是不具有点击事件的. 解决问题四种方式: ...

  8. [转]iOS Safari 中click点击事件失效的解决办法

    iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...

  9. 【转载】jQuery手机移动端触屏日历日期选择

    文章转载自 科e互联 http://www.internetke.com/ 原文链接:http://www.internetke.com/effects/css3/2015/0120/1222.htm ...

随机推荐

  1. Autoit里用多进程模拟多线程

      一直以来Autoit都不支持多线程,因此一些需要同时运行多个循环的操作也就无法实现.这个问题在其它的某些语言里也经常出现,解决的方法就是使用多进程. 所谓多进程,就是同时运行多个子进程,每个子进程 ...

  2. 导航栏协议方法UINavigationControllerDelegate

    关于UINavigationControllerDelegate: Delegate中一共有6个方法.其中两个跟控制器ViewController的跳转有关.有两个跟屏幕的旋转有关.有两个跟导航栏动画 ...

  3. Vuex踩坑--数据刷新时丢失

    近期做项目的过程中,使用vuex保存页面公共数据,测试无网情况后又接通网络的情况下,页面进行重新加载.遇到一个小bug——发现在苹果手机IOS系统下,页面刷新重新加载后页面中通过vuex存储并显示的数 ...

  4. HashMap ( Java 8)

    HashTable是早起java提供的基于hash表的实现,不允许存放null键和值,是同步的,影响开销,不太被推荐. HashMap行为上和HashTable差不多,不是同步的,允许键和值为null ...

  5. Python字符串(二)

    四.类型转换 1. 基本语法: 类型名(数据) --- 将指定数据转换成指定类型 说明:类型名 -任何python支持的,或者自定的类型都可以数据 -需要转换的对象,类型不同要求可能不一样 2. 转换 ...

  6. node服务端口被占用

    今天在输入node .\app.js启动api接口时出现了以下报错: 出现这个报错说明端口被占用:Error: listen EADDRINUSE: address already in use :: ...

  7. WinCC V7.5安装过程截图

  8. sklearn调用逻辑回归算法

    1.逻辑回归算法即可以看做是回归算法,也可以看作是分类算法,通常用来解决分类问题,主要是二分类问题,对于多分类问题并不适合,也可以通过一定的技巧变形来间接解决. 2.决策边界是指不同分类结果之间的边界 ...

  9. Jquery元素筛选、html()和text()和val三者区别

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. PE文件结构体-IMAGE_DATA_DIRECTORY

    IMAGE_OPTIONAL_HEADER结构体最后一个成员是数组结构,大小为16,每个元素都是一个IMAGE_DATA_DIRECTORY结构体 typedef struct _IMAGE_DATA ...