移动端触屏click点击事件延迟问题,以及tap的解决方案
在移动端 触屏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手势的组件代码。
测试代码(注:使用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的解决方案的更多相关文章
- 移动端触屏滑动,JS事件
先了解下 移动端的触屏滑动 毕竟这玩意其实和PC端还是有一定的区别的 hh 整理了下网上的资料放一放 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等 ...
- js移动端触屏事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- Hammer.js移动端触屏框架的使用
hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...
- JS的Touch事件们,触屏时的js事件
丫的,终于找到了JS在平板电脑上的事件!!! iphone.ipod Touch.ipad触屏时的js事件 1.Touch事件简介 pc上的web页面鼠标会产生onmousedown.on ...
- JS案例之5——移动端触屏滑动
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- fastclick.js解决移动端(ipad)点击事件反应慢问题
参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 ...
- IOS - Safari中click点击事件无效
做web移动端页面时,安卓端一点问题也没,发现在ios真机上点击事件无效,发现Safari下只有默认可点击的元素才click点击事件,像span div等元素是不具有点击事件的. 解决问题四种方式: ...
- [转]iOS Safari 中click点击事件失效的解决办法
iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...
- 【转载】jQuery手机移动端触屏日历日期选择
文章转载自 科e互联 http://www.internetke.com/ 原文链接:http://www.internetke.com/effects/css3/2015/0120/1222.htm ...
随机推荐
- Numpy 广播(Broadcast)
广播(Broadcast)是 numpy 对不同形状(shape)的数组进行数值计算的方式,对数组的算术运算通常在相应的元素上进行. 如果两个数组 a 和 b 形状相同,即满足a.shape == b ...
- PaperWeek1
------------------5月13日星期一---------------------------- 论文:Practical Locally Private Heavy Hitters 看了 ...
- Vmware tools变灰不能点击的问题
1. 挂载镜像文件,虚拟机->设置->硬件->CD/DVD.右边“连接”下面选择“使用IOS镜像文件”,浏览选择虚拟机包目录下面linux.iso 2. 挂载成功后,在虚拟机右下角c ...
- 在linux环境中配置tomcat
1.将tomcat文件上传到linux服务器上,并且解压文件. 2.创建文件夹 mkdir /usr/local/solr (这个文件夹,根据自己的喜好来创建) 3.将解压好的tomcat文件复制到 ...
- H.264 SODB RBSP EBSP的区别
SODB(String of Data Bits,数据比特串): 最原始,未经过处理的编码数据 RBSP(Raw Byte Sequence Payload,原始字节序列载荷): 在SODB的后面填加 ...
- PyCharm 2018.1破解激活步骤
1.下载破解补丁 下载地址:https://pan.baidu.com/s/1qjI9uHaw0x374rwu6H8djA 将下载下来的破解补丁放到C:\software\JetBrains\PyCh ...
- 【C#】关于左移/右移运算符的使用
吐槽先~为什么我的老师大学时候没教过我这东西 - -. 继续送栗子: 比如 “(1+2)<<3” 你们猜等于几~ Debug.Log((1+2)<<3)之后输出的是“24”. ...
- JuJu团队1月3号工作汇报
JuJu团队1月3号工作汇报 JuJu Scrum 团队成员 今日工作 剩余任务 困难 飞飞 测试dataloader 将model嵌入GUI 无 婷婷 调试代码 提升acc 无 恩升 -- 写p ...
- Docker 简单使用笔记
Docker笔记 安装 首先检查是否已经安装过Docker:yum list installed | grep docker,如果已经安装过需要删除旧的Docker:yum remove dock ...
- VMware Tools 组件、配置选项和安全要求