在移动端使用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事件延时的更多相关文章

  1. 移动端click事件延迟300ms到底是怎么回事,该如何解决?

    不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...

  2. fastclick:处理移动端click事件300毫秒延迟

    fastclick:处理移动端click事件300毫秒延迟 1.兼容性 iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome Android上的Chrome(ICS) Opera ...

  3. 移动端click事件300ms延迟

    移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...

  4. vue.js 添加 fastclick的支持 处理移动端click事件300毫秒延迟

    fastclick:处理移动端click事件300毫秒延迟. 1,先执行安装fastclick的命令 npm install fastclick 2,在main.js中引入,并绑定到body. imp ...

  5. h5开发app,移动端 click 事件响应缓慢的解决方案

    造成点击缓慢的原因 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 使用 ...

  6. 移动端click事件延迟300ms的原因以及解决办法

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...

  7. 处理移动端click事件300ms延迟的好方法—FastClick

    下载地址:https://github.com/ftlabs/fastclick 1.click事件为什么有延迟? “...mobile browsers will wait approximatel ...

  8. 移动端click事件延迟300ms的原因以及解决办法[转载]

    原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...

  9. 苹果浏览器移动端click事件延迟300ms的原因以及解决办法

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...

随机推荐

  1. IBM rational rose画时序图软件破解安装

    上边这个链接是开头的安装步骤,照着链接中的步骤安装完之后,接下来看下边. 1.然后安装完成打开软件“IBM Rational License Keyadministrator”.出现下图:选中第二项“ ...

  2. layui loading

    layer.msg('加载中', { icon: 16 ,shade: 0.4}); layer.load(2);风格二 setTimeout(function(){ layer.closeAll(' ...

  3. Spring Boot 构建电商基础秒杀项目 (三) 通用的返回对象 & 异常处理

    SpringBoot构建电商基础秒杀项目 学习笔记 定义通用的返回对象 public class CommonReturnType { // success, fail private String ...

  4. 51nod 1503 猪和回文(dp滚存)

    题面 大意:在一个n*m的矩形中从(1,1)走到(n,m)而且走过的路径是一条回文串,统计方案数 sol:我们考虑从(1,1)和(n,m)两端开始算,这样就只要保证每次经过的字符一样就可以满足回文了, ...

  5. linq之group by 的使用

    group by var list = from s in _sysBll.GetList(s => s.ParamID == "TraSchType" && ...

  6. HTML5-Input

    HTML5拥有多个新的表单输入类型,这些新特性提供了更好的输入控制和验证(有的浏览器不支持) color.date.datetime.datetime-local.email.month.number ...

  7. P1164 小A点菜

    原题链接 https://www.luogu.org/problemnew/show/P1164 此题是一道简单的动规问题 才学两天不是很熟练,我苦思冥想看着题解终于想出来了. 主要的思路如下: 我们 ...

  8. BZOJ4653 [NOI2016] 区间 【线段树】

    题目分析: 首先思考一个二分答案的做法.我们可以注意到答案具有单调性,所以可以二分答案. 假设当前二分的答案是$ k $.那么按照大小顺序插入每个区间,同时在末端删除会对答案产生影响的区间.这里不妨用 ...

  9. 洛谷P1897电梯里的爱情题解

    题目 这个题是一个搜索题,可以先算出最高楼层,并算出不重复的楼层的个数,要注意的一点就是一定不要把0楼算在内. 代码 #include<iostream> #include<cstr ...

  10. [SCOI2005] 互不侵犯

    传送门:>Here< 解题思路 其实这道题一种很简单的解法是搜索+打表,但是这样很赖皮.这里给出一种状压DP的解法. 很显然利用普通的DP无法解决了,因为针对点来转移是很难的.但看到$N& ...