在移动端 触屏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. Python 中的else

    在其他程序语言中,else 似乎只是与 if 关键字有缘分.而与其他的关键字没有联系,不能搭配使用,而在python中,else 除了与 if 匹配外, 还可以与for.while/ try等关键字匹 ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:边框表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. Python 类型转换指南

    一.int型 支持转换为 int 类型的,仅有 float.str.bytes,其他类型均不支持. 1.float -> int会去掉小数点及后面的数值,仅保留整数部分. 2.str -> ...

  4. java 学习地址

    数组 JAVA中数组排序小结 Java中ArrayList和LinkedList区别    在往里面插入数据时.LinkedList会比ArrayList快很多,因为前者仅仅做了一个类型的插入,而后者 ...

  5. JDBC--处理事务

    1.事务是指一组逻辑操作单元,使数据从一种状态转换到另一种状态. 2.事务的四个属性: --1)原子性:事务是一个不可分割的工作单位,事务中的操作要么都发生要么都不发生: --2)一致性:事务必须是数 ...

  6. 40和为S的两个数字

    题目描述 输入一个递增排序的数组和一个数字S,在数组中查找两个数,是的他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 输出描述: 对应每个测试案例,输出两个数,小的先输出. 思路 ...

  7. redis、mongodb、memcache安装好后设置开机自启动

    vim /etc/rc.d/rc.local /usr/local/mongodb/bin/mongod --smallfiles /usr/local/bin/redis-server/usr/lo ...

  8. Unity Scene视图下 输出物体坐标等信息

    using UnityEditor; using UnityEngine; [CustomEditor(typeof(GameObject))] public class MyEditor : Edi ...

  9. POJ 3579:Median 差值的中位数

    Median Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4680   Accepted: 1452 Descriptio ...

  10. bootstrap点击下拉菜单没反应

    出现这个问题一般就涉及 网页脚本的问题 好好看看自己网页 scripts 编写是否正确 也可以通过浏览器的 F12 进入console 控制台看看是什么问题 总的来说 该错误要从网页脚本编写的问题出发 ...