移动端触屏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 ...
随机推荐
- Python 中的else
在其他程序语言中,else 似乎只是与 if 关键字有缘分.而与其他的关键字没有联系,不能搭配使用,而在python中,else 除了与 if 匹配外, 还可以与for.while/ try等关键字匹 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:边框表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Python 类型转换指南
一.int型 支持转换为 int 类型的,仅有 float.str.bytes,其他类型均不支持. 1.float -> int会去掉小数点及后面的数值,仅保留整数部分. 2.str -> ...
- java 学习地址
数组 JAVA中数组排序小结 Java中ArrayList和LinkedList区别 在往里面插入数据时.LinkedList会比ArrayList快很多,因为前者仅仅做了一个类型的插入,而后者 ...
- JDBC--处理事务
1.事务是指一组逻辑操作单元,使数据从一种状态转换到另一种状态. 2.事务的四个属性: --1)原子性:事务是一个不可分割的工作单位,事务中的操作要么都发生要么都不发生: --2)一致性:事务必须是数 ...
- 40和为S的两个数字
题目描述 输入一个递增排序的数组和一个数字S,在数组中查找两个数,是的他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 输出描述: 对应每个测试案例,输出两个数,小的先输出. 思路 ...
- redis、mongodb、memcache安装好后设置开机自启动
vim /etc/rc.d/rc.local /usr/local/mongodb/bin/mongod --smallfiles /usr/local/bin/redis-server/usr/lo ...
- Unity Scene视图下 输出物体坐标等信息
using UnityEditor; using UnityEngine; [CustomEditor(typeof(GameObject))] public class MyEditor : Edi ...
- POJ 3579:Median 差值的中位数
Median Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 4680 Accepted: 1452 Descriptio ...
- bootstrap点击下拉菜单没反应
出现这个问题一般就涉及 网页脚本的问题 好好看看自己网页 scripts 编写是否正确 也可以通过浏览器的 F12 进入console 控制台看看是什么问题 总的来说 该错误要从网页脚本编写的问题出发 ...