在移动端 触屏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. js读取本地json/txt/xml存在跨越问题,可以用jsonp 读取本地json文件

    想自己用 js写一个原生的ajax请求,访问本地文件,json/txt.但是demo,写了一个后,发现 原来是跨域了. js 写的原生ajax 请求代码如下 html代码 <div id=&qu ...

  2. The Google File System中文版

    译者:alex 摘要 我们设计并实现了Google GFS文件系统,一个面向大规模数据密集型应用的.可伸缩的分布式文件系统.GFS虽然运行在廉价的普遍硬件设备上,但是它依然了提供灾难冗余的能力,为大量 ...

  3. Intellij Idea webstorm 激活

    参考: 最新破解 https://www.cnblogs.com/litterCoder/p/12175461.html 推荐 https://mp.weixin.qq.com/s/zxfDAlN8G ...

  4. Intel推出两款新处理器路线图公布

    10月份Intel会推出两款新处理器,一个是酷睿i9-9900KS,全核5GHz处理器,还有就是Cascade Lake-X系列的HEDT旗舰,今年的处理器布局大概就是这样了. 与AMD承诺每年发布一 ...

  5. 关于c++ 感想

    前言 在学校开展了c++的课程,但是不得不说相当乏味. 原因很简单: 1.感觉c++很高级,自己就这智商怎么学的会哦,自己给了自己门槛. 2.c++很难快速的做出一个能够展现的项目,缺乏成就感. 3. ...

  6. Python对城市距离自动化爬取【必学小型项目】

        本地创建数据库,将 excel 数据存储到 city 表中,再取 | 湖北省 | 的所有地级市和县.县级市.区数据作为样表数据记录在样表中.利用 python 的 xlrd 包,定义 proc ...

  7. IOS 常用View属性设置

    设置按钮属性 1.设置按钮背景颜色 backgroundColor @property (weak, nonatomic) IBOutlet UIButton *deleteButton; self. ...

  8. 1-8SpringBoot之切面AOP

    SpringBoot提供了强大AOP支持,我们前面讲解过AOP面向切面,所以这里具体AOP原理就补具体介绍: AOP切面主要是切方法,我们一般搞一些日志分析和事务操作,要用到切面,类似拦截器: @As ...

  9. 小程序canvas 变换

    var ctx = wx.createCanvasContext('base'); var centerX = 375/ 2; var centerY = 200; var rotate = 90; ...

  10. 区块链 - 哈希(Hash)

    章节 区块链 – 介绍 区块链 – 发展历史 区块链 – 比特币 区块链 – 应用发展阶段 区块链 – 非对称加密 区块链 – 哈希(Hash) 区块链 – 挖矿 区块链 – 链接区块 区块链 – 工 ...