移动端click事件延时
在移动端使用click事件会产生300ms的延迟
问题的产生:
移动端存在双击放大的问题,所以在移动端点击事件发生时,为了判断用户的行为(到底是要双击还是要点击),浏览器通常会等待300ms,如果300ms之内,用户没有再次点击,则判定为点击事件,否则判定为双击缩放。
为什么要解决:
线代web对性能的极致追求,对用户体验的高标准,让着300ms的卡顿变得难以接受
如何解决:
1、user-scalable:no 禁止缩放——没有缩放就不存在双击,也就没有点击延迟
2、指针事件:CSS:-ms-touch-action:none 点击后浏览器不会启用缩放操作,也就不存在延迟。然而这种方法兼容性很不好。
3、FastClick库:针对这个问题所开发的轻量级库。FastClick在检测到touchend事件后,会立即触发一个模拟的click事件,并把300ms后真正的click事件阻止掉
用法:
window.addEventListener("load",function(){
FastClick.attach(document.body);
});
//虽然可以绑定到更具体的元素,但绑定到body上能使整个应用都受益
当FastClick检测到页面中使用了user-scalable:no或者touch-action:none方案时,会静默退出。棒棒哒!
移动端click事件延时的更多相关文章
- 移动端click事件延迟300ms到底是怎么回事,该如何解决?
不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...
- fastclick:处理移动端click事件300毫秒延迟
fastclick:处理移动端click事件300毫秒延迟 1.兼容性 iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome Android上的Chrome(ICS) Opera ...
- 移动端click事件300ms延迟
移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...
- vue.js 添加 fastclick的支持 处理移动端click事件300毫秒延迟
fastclick:处理移动端click事件300毫秒延迟. 1,先执行安装fastclick的命令 npm install fastclick 2,在main.js中引入,并绑定到body. imp ...
- h5开发app,移动端 click 事件响应缓慢的解决方案
造成点击缓慢的原因 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 使用 ...
- 移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
- 处理移动端click事件300ms延迟的好方法—FastClick
下载地址:https://github.com/ftlabs/fastclick 1.click事件为什么有延迟? “...mobile browsers will wait approximatel ...
- 移动端click事件延迟300ms的原因以及解决办法[转载]
原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...
- 苹果浏览器移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
随机推荐
- IBM rational rose画时序图软件破解安装
上边这个链接是开头的安装步骤,照着链接中的步骤安装完之后,接下来看下边. 1.然后安装完成打开软件“IBM Rational License Keyadministrator”.出现下图:选中第二项“ ...
- layui loading
layer.msg('加载中', { icon: 16 ,shade: 0.4}); layer.load(2);风格二 setTimeout(function(){ layer.closeAll(' ...
- Spring Boot 构建电商基础秒杀项目 (三) 通用的返回对象 & 异常处理
SpringBoot构建电商基础秒杀项目 学习笔记 定义通用的返回对象 public class CommonReturnType { // success, fail private String ...
- 51nod 1503 猪和回文(dp滚存)
题面 大意:在一个n*m的矩形中从(1,1)走到(n,m)而且走过的路径是一条回文串,统计方案数 sol:我们考虑从(1,1)和(n,m)两端开始算,这样就只要保证每次经过的字符一样就可以满足回文了, ...
- linq之group by 的使用
group by var list = from s in _sysBll.GetList(s => s.ParamID == "TraSchType" && ...
- HTML5-Input
HTML5拥有多个新的表单输入类型,这些新特性提供了更好的输入控制和验证(有的浏览器不支持) color.date.datetime.datetime-local.email.month.number ...
- P1164 小A点菜
原题链接 https://www.luogu.org/problemnew/show/P1164 此题是一道简单的动规问题 才学两天不是很熟练,我苦思冥想看着题解终于想出来了. 主要的思路如下: 我们 ...
- BZOJ4653 [NOI2016] 区间 【线段树】
题目分析: 首先思考一个二分答案的做法.我们可以注意到答案具有单调性,所以可以二分答案. 假设当前二分的答案是$ k $.那么按照大小顺序插入每个区间,同时在末端删除会对答案产生影响的区间.这里不妨用 ...
- 洛谷P1897电梯里的爱情题解
题目 这个题是一个搜索题,可以先算出最高楼层,并算出不重复的楼层的个数,要注意的一点就是一定不要把0楼算在内. 代码 #include<iostream> #include<cstr ...
- [SCOI2005] 互不侵犯
传送门:>Here< 解题思路 其实这道题一种很简单的解法是搜索+打表,但是这样很赖皮.这里给出一种状压DP的解法. 很显然利用普通的DP无法解决了,因为针对点来转移是很难的.但看到$N& ...