fastclick:处理移动端click事件300毫秒延迟
fastclick:处理移动端click事件300毫秒延迟
1、兼容性
- iOS 3及更高版本的移动Safari
- iOS 5及更高版本的Chrome
- Android上的Chrome(ICS)
- Opera Mobile 11.5及以上版本
- Android 2以来的Android浏览器
- PlayBook OS 1及以上版本
2、不应用FastClick的场景
桌面浏览器;
如果视口元标签中设置了width=device-width,Android上的Chrome 32+会禁用300ms延时;
<meta name="viewport" content="width=device-width, initial-scale=1">
- 1
视频元标签如果设置了user-scalable=no,Android上的Chrome(所有版本)都会禁用300ms延迟。
IE10中,可以使用css属性-ms-touch-action: none禁止元素双击缩放(参考文章)。
3、安装:
先执行安装fastclick的命令。
npm install fastclick -S
之后,在main.js中引入,并绑定到body
import FastClick from 'fastclick'
FastClick.attach(document.body);
fastclick:处理移动端click事件300毫秒延迟的更多相关文章
- vue.js 添加 fastclick的支持 处理移动端click事件300毫秒延迟
fastclick:处理移动端click事件300毫秒延迟. 1,先执行安装fastclick的命令 npm install fastclick 2,在main.js中引入,并绑定到body. imp ...
- 移动端click事件出现300ms延迟
问题分析: 双击缩放是指手在屏幕上快速点击两次,iOS自带的Safari浏览器会将网页缩放至原始比例.当用户在屏幕上单击某元素时,浏览器会先捕获此处单击,但浏览器不知道用户是要单击链接还是要双击该部分 ...
- h5开发app,移动端 click 事件响应缓慢的解决方案
造成点击缓慢的原因 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 使用 ...
- 处理移动端click事件300ms延迟的好方法—FastClick
下载地址:https://github.com/ftlabs/fastclick 1.click事件为什么有延迟? “...mobile browsers will wait approximatel ...
- 移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
- 移动端click事件延迟300ms到底是怎么回事,该如何解决?
不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...
- 移动端click事件延迟300ms的原因以及解决办法[转载]
原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...
- 移动端click事件300ms延迟
移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...
- 苹果浏览器移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
随机推荐
- poj 2104 K-th Number 主席树+超级详细解释
poj 2104 K-th Number 主席树+超级详细解释 传送门:K-th Number 题目大意:给出一段数列,让你求[L,R]区间内第几大的数字! 在这里先介绍一下主席树! 如果想了解什么是 ...
- E20170706-sl
erode vt. 侵蚀,腐蚀 vi. 逐渐毁坏; 削弱,损害; thin adj. 薄的; 瘦的; 细的; 稀少的; laptop n. 便携式电脑;
- bzoj4247: 挂饰(背包dp)
4247: 挂饰 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 1136 Solved: 454[Submit][Status][Discuss] ...
- [App Store Connect帮助]二、 添加、编辑和删除用户(5)创建一个沙盒测试员帐户
如果您的 App 使用了 App 内购买项目或 Apple Pay,您可以在 App Store Connect 中创建沙盒测试员帐户,以便您向用户提供该 App 前,可以使用该帐户在测试环境中运行您 ...
- IOC框架---什么是IOC
1 IoC理论的背景 我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. ...
- linux 怎么在后台添加运行脚本,即使关机也可以用
nohup ma.php >guangxindai.log 2>&1 & 或者 nohup ma.php & 在shell中,文件描述符通常是:STDIN标准输入, ...
- MFC学习篇(一):用OpenCV显示视频
首先是一些基础的步骤,如建立MFC应用,添加按钮等,博主主要参考了下面这篇文章,其中的前32步都是用OpenCV显示图片和视频所必须的,即通用的.由于LZ原来有配置OpenCV的基础,所以配制还是比较 ...
- BZOJ 2946 SA/SAM
思路: 1. 二分+后缀数组 2.SAM //By SiriusRen #include <cstdio> #include <cstring> #include <al ...
- 【洛谷4219】[BJOI2014]大融合(线段树分治)
题目: 洛谷4219 分析: 很明显,查询的是删掉某条边后两端点所在连通块大小的乘积. 有加边和删边,想到LCT.但是我不会用LCT查连通块大小啊.果断弃了 有加边和删边,还跟连通性有关,于是开始yy ...
- Http协议详解(转)>>>写的很好
声明:本片文章非原创,仅供自己学习并分享 内容来源于博客园作者MIN飞翔的HTTP协议详解地址http://www.cnblogs.com/EricaMIN1987_IT/p/3837436.html ...