移动端触屏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 ...
随机推荐
- 【剑指Offer面试编程题】题目1520:树的子结构--九度OJ
题目描述: 输入两颗二叉树A,B,判断B是不是A的子结构. 输入: 输入可能包含多个测试样例,输入以EOF结束. 对于每个测试案例,输入的第一行一个整数n,m(1<=n<=1000,1&l ...
- Linux下搭建一个nginx+2tomcat负载均衡环境(转)
一.安装tomcat 1.将tomcat安装包上传到Linux下: 2.解压2个tomcat,并分别修改名称: 1).解压命令:unzip 2).修改用户名:mv 3.分别修改两个tomcat的端口号 ...
- ELK/EFK——日志收集分析平台
ELK——日志收集分析平台 ELK简介:在开源的日志管理方案之中,最出名的莫过于ELK了,ELK由ElasticSearch.Logstash和Kiabana三个开源工具组成.1)ElasticSea ...
- Linux CentOS7 VMware克隆、虚拟机之间互连——初学笔记
一.VMware克隆:选中我的第一个虚拟机,右键下拉菜单—管理—克隆. 弹出对话框,下一步根据提示: 完成克隆: 二.虚拟机互连: 配置第二虚拟机IP,使用:vi /etc/s ...
- 【随缘更(gu)】牛客D4简要思路(没有题解)
T1 当然不能枚举每个区间,于是我们考虑算贡献. 对于每个位置i,我们计算其作为区间内第一个出现ai的位置的区间总数,则有ans=sigma( i - last[i] ) * ( n - i + 1 ...
- Pycharm 报错 Environment location directory is not empty 解决
新电脑clone项目后发现Project Interpreter无法配置, New environment 选择后无法应用, 鼠标悬停在Location 提示 Environment location ...
- Cookie跨域setDomain和setPath
CSDN日报20170226--<你离心想事成只差一个计划> 程序员2月书讯 [招募]Python学习班招生啦 Cookie跨域setDomain和setPath 标签: cookiesp ...
- 几种编辑器的markdown-toc生成目录在github上的表现
Vscode vscode的markdown-toc插件的实现是比较好的, 目前发现的问题就只有在自动生成带链接目录的时候无法正确识别和生成一些特殊的字符. 例如: ▶ 这导致在标题中不能加入特殊字符 ...
- 全程2分钟!教你如何免费下载Windows 10
全程2分钟!教你如何免费下载Windows 10 2014-10-02 08:40:59 来源:pconline 原创 作者:唐山居人 责任编辑:caoweiye (评论314条) 终于在 ...
- 第1节 IMPALA:10、基本查询语法;11、数据加载的4种方式
9.3. 创建数据库表 创建student表 CREATE TABLE IF NOT EXISTS mydb1.student (name STRING, age INT, contact INT ) ...