移动端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 这种小屏幕浏览桌面端站点 ...
随机推荐
- 去掉dede织梦position当前位置最后一个箭头的方法
理论是,dede的当前位置标签{dedefield name='position'}结构是 首页 > 主栏目 > 子栏目 > ,这就说明,而箭头符号字段数据都是在后台设置后存储在数据 ...
- Yii2的客户端验证
如何配置Yii的客户端验证呢? 首先,应该配置验证规则的场景,即scenario 其次,应该配置验证规则,在验证规则中配置客户端验证 例如:
- Missing artifact com.oracle:ojdbc6:jar:11.2.0.3 Maven中不能引入ojdbc解决方法,错误
今天从服务器检出Maven项目的时候,遇到了一个问题,就是在pom.xml中引入ojdbc的jar包的时候出错了,提示是Missing artifact com.oracle:ojdbc6:jar:1 ...
- nginx rewrite重写
通过官方文档可以看到,rewrite的作用上下文是 server location,可以写在 server里面 亦或location里面; 命令: if (条件) {} 条件判断 set #设置 ...
- Vue单文件组件
前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...
- java web 开发入门 --- tomcat/servlet/jsp
在做java web 开发时,要先安装tomcat.它是一个web服务器,也叫web容器,我们把写好的jsp, html页面放到它里面,然后启动它,就可以用浏览器访问这些页面,地址栏中输入localh ...
- Nginx tcp限制并发、IP、记日志
L:114 Syntax: limit_conn_zone key zone=name:size;//类似http limit_conn 需要开个共享内存 zone=name(共享内存名称):siz ...
- MySQL的my.cnf文件(解决5.7.18下没有my-default.cnf)
官网说:从5.7.18开始不在二进制包中提供my-default.cnf文件.参考:https://dev.mysql.com/doc/refman/5.7/en/binary-installatio ...
- Luogu5289 十二省联考2019字符串问题(后缀数组+拓扑排序+线段树/主席树/KDTree)
先考虑80分做法,即满足A串长度均不小于B串,容易发现每个B串对应的所有A串在后缀数组上都是一段连续区间,线段树优化连边然后判环求最长链即可.场上就写了这个. 100分也没有什么本质区别,没有A串长度 ...
- Codeforces Round #472 Div. 1
A:某个格子被染黑说明该行和该列同时被选中,使用并查集合并,最后看每个集合中是否有未被染黑的格子即可. #include<iostream> #include<cstdio> ...