在移动端 触屏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. requests---requests封装请求类型

    我们在做自动化的时候,肯定是代码越简洁越好,代码重复量越少越好,这里呢,我们可以通过把requests的请求类型都封装起来,这样编写用例的时候可以直接进行请求 requests方法封装 我们通常用的最 ...

  2. UISearchBar设置背景色

    1.关于UISearchBar的背景颜色,竟然要如下设置才正常: [documentSearchView setBackgroundImage:[UIImage new]]; documentSear ...

  3. redis之Set(有序)类型常用方法总结

    redis之Set(有序)类型常用方法总结 存--ZADD key [NX|XX] [CH] [INCR] score member [score member ...] XX: 仅仅更新存在的成员, ...

  4. 【剑指Offer面试编程题】题目1514:数值的整数次方---九度OJ

    题目描述: 给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. 输入: 输入可能包含多个测试样例. 对于每个输入文件,第一行输入一个整数T, ...

  5. ubuntu 用管理员身份进入系统

    我们需要以管理员的身份进入系统,才能在系统中畅通无阻     以管理员的身份进入系统,往下看: Ubuntu安装好后,root初始密码(默认密码)不知道,需要设置. 1.先用安装Ubuntu的时候创建 ...

  6. POJ 1487:Single-Player Games 浮点数高斯消元

    Single-Player Games Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 1287   Accepted: 36 ...

  7. 大数据篇:DolphinScheduler-1.2.0.release安装部署

    大数据篇:DolphinScheduler-1.2.0.release安装部署 1 配置jdk #查看命令 rpm -qa | grep java #删除命令 rpm -e --nodeps xxx ...

  8. question1 赋值运算操作符

    注意的问题书上讲的很详细了 下面是代码实现,但是VS有一个问题,strcpy安全性较低,虽然可以通脱编译,但是运行会报错,提示用strcpy_s()替代,但是,这里用strcpy()替代也不行, // ...

  9. 注意重写类的equals()方法

    注意在java中在比较引用类型时==和原生的equals()方法比较的都是看它们否是同一个对象(说的更直白一点就是他们在内存的位置是否是一样的),但我们在真实世界中关注的往往只是其中的某个属性是否相等 ...

  10. SSH框架系列:Spring读取配置文件以及获取Spring注入的Bean

    分类: [java]2013-12-09 16:29 1020人阅读 评论(0) 收藏 举报 1.简介 在SSH框架下,假设我们将配置文件放在项目的src/datasource.properties路 ...