移动端click事件出现300ms延迟
问题分析:
双击缩放是指手在屏幕上快速点击两次,iOS自带的Safari浏览器会将网页缩放至原始比例。
当用户在屏幕上单击某元素时,浏览器会先捕获此处单击,但浏览器不知道用户是要单击链接还是要双击该部分区域进行缩放操作,所以浏览器捕获第1次单击后,会先持续一段时间t,如果在t时间段内用户未进行下一次点击,则浏览器会做单击跳转链接的处理;如果t时间段内用户进行了第2次单击操作,则浏览器会禁止跳转,转而对点击区域进行缩放操作。那么这个时间区间t是多少呢?在IOS safari下,大概为300ms。
解决方案:
一、浏览器开发商的解决方案
1、禁用缩放
<meta name="viewport" content="user-scalable=no"> <meta name="viewport" content="initial-scale=1,maximum-scale=1">
缺点:这样做,会完全禁用缩放,如果想放大很小的图片或文字,就办不到了。
2、更改默认的视口宽度
<meta name="viewport" content="width=device-width">
该方案没有完全禁用缩放,只是禁用了浏览器默认的双击缩放行为,但用户仍然可以通过双指缩放操作来缩放页面。
3、CSS touch-action
touch-action: none,表示在该元素上的操作不会触发浏览器的任何默认行为,就无需进行300ms的延迟判断。
要解决300ms点击延迟的问题,从长远来说,自然还是得浏览器开发商提供统一的最终的解决方案。但是,到目前为止,以上3种方案并不能提供很好的兼容性,对于方案1和方案2,Chrome是率先支持的,Firefox紧随其后,然而令Safari头疼的是,它除了双击缩放还有双击滚动操作,如果采用这种两种方案,势必连双击滚动也要一起禁用;对于方案3,IE是支持的,但是其他浏览器支持不完善。
所以,在浏览器开发商最终统一的解决方案出来之前,我们还有一些基于Javascript的现成的解决方案可以用。
二、Javascript的解决方案
1、指针事件的polyfill
由于除了IE之外的大部分浏览器都不支持新的CSS属性touch-action,所以指针事件的polyfill必须通过某种方式去模拟支持这个属性。一种方案是JS去请求解析所有的样式表,另一种方案是将touch-action作为html标签的属性。
2、FastClick
FastClick的实现原理是在检测到touchend事件的时候,会通过DOM自定义事件立即触发模拟一个click事件,并把浏览器在300ms之后的click事件阻止掉。
移动端click事件出现300ms延迟的更多相关文章
- fastclick:处理移动端click事件300毫秒延迟
fastclick:处理移动端click事件300毫秒延迟 1.兼容性 iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome Android上的Chrome(ICS) Opera ...
- vue.js 添加 fastclick的支持 处理移动端click事件300毫秒延迟
fastclick:处理移动端click事件300毫秒延迟. 1,先执行安装fastclick的命令 npm install fastclick 2,在main.js中引入,并绑定到body. imp ...
- fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别
之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html,fastclick可以解决在手机上点击事件的300ms ...
- h5开发app,移动端 click 事件响应缓慢的解决方案
造成点击缓慢的原因 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 使用 ...
- 移动端click事件延迟300ms到底是怎么回事,该如何解决?
不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...
- 移动端click事件300ms延迟
移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...
- 处理移动端click事件300ms延迟的好方法—FastClick
下载地址:https://github.com/ftlabs/fastclick 1.click事件为什么有延迟? “...mobile browsers will wait approximatel ...
- 分享一个移动项目中消除click事件点击延迟的方法
对于前端工程师来说,apicloud无疑给我们提供了很好的平台,有各种各样的模块供我们使用,但是在实际项目的时候,很大部分的代码,还是需要我们用html css js来实现的.但是呢,移动端页面对于c ...
- 移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
随机推荐
- centos7关闭ipv6
方法一: 编辑文件 /etc/sysctl.conf ,新增以下两行 net.ipv6.conf.all.disable_ipv6 = net.ipv6.conf.default.disable_ip ...
- [HNOI2016]矿区
[HNOI2016]矿区 平面图转对偶图 方法: 1.分成正反两个单向边,每个边属于一个面 2.每个点按照极角序sort出边 3.枚举每一个边,这个边的nxt就是反边的前一个(这样找到的是面的边逆时针 ...
- [SHOI2008]仙人掌图 II——树形dp与环形处理
题意: 给定一个仙人掌,边权为1 距离定义为两个点之间的最短路径 直径定义为距离最远的两个点的距离 求仙人掌直径 题解: 类比树形dp求直径. f[i]表示i向下最多多长 处理链的话,直接dp即可. ...
- Zabbix通过JMX方式监控java中间件
Zabbix2.0添加了支持用于监控JMX应用程序的服务进程,称为“Zabbix-Java-gateway”:它是用java写的一个程序. 工作原理: zabbix_server想知道一台主机上的特定 ...
- numpy中的随机数模块
https://www.cnblogs.com/td15980891505/p/6198036.html numpy.random模块中提供啦大量的随机数相关的函数. 1 numpy中产生随机数的方法 ...
- redis的list取出数据方式速度测试
redis测试: package business; import java.io.BufferedReader; import java.io.File; import java.io.FileIn ...
- HashMap底层结构、原理、扩容机制
https://www.jianshu.com/p/c1b616ff1130 http://youzhixueyuan.com/the-underlying-structure-and-princip ...
- ASP.NET WebApi 自带Json返回日期带T无法格式化的问题
WebApi自带json序列化对遇到时间日期字段的时候,到前端获取的格式总是为“ 2016-07-14T15:32:44”,中间总是会带一个T,显然不是很友好.先是偷懒在园子里边去找一些解决方案,尝试 ...
- 第十五节:深入理解async和await的作用及各种适用场景和用法
一. 同步VS异步 1. 同步 VS 异步 VS 多线程 同步方法:调用时需要等待返回结果,才可以继续往下执行业务 异步方法:调用时无须等待返回结果,可以继续往下执行业务 开启新线程:在主线程之外 ...
- MyBatis使用注意事项
目录 1. 使用何种映射器配置 2. 对象生命周期和作用域 SqlSessionFactoryBuilder SqlSessionFactory SqlSession 映射器实例(Mapper Ins ...