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 这种小屏幕浏览桌面端站点 ...
随机推荐
- framework/base子目录
framework/base下各子目录 ~/src/aosp_master/frameworks $ tree base/ -L 1 base/ ├── Android.bp ├── Android. ...
- 禁用backspace网页回退功能
<script language="JavaScript">document.onkeydown = check;function check(e) { var cod ...
- js 获取URL的值
今天碰到要在一个页面获取另外一个页面url传过来的参数,一开始很本能的想到了用 split("?")这样一步步的分解出需要的参数. 后来想了一下,肯定会有更加简单的方法的!所以在网 ...
- JSP执行原理图
- Excel文件导入导出
/** * 导入Excel文件数据 * * @param file 将要导入的Excel文件 * @param fileCheckKeyWord 用于判断导入文件是否 ...
- [Android]异常6-TextView setText延迟显示
背景:Thread和Handler显示数据到界面 解决办法有: 解决一>界面使用了ListView.GridView等,把高度和宽度调整为固定值或者match_parent 解决二>某处U ...
- [Android]异常1-duplicate files during packaging of
异常原因: 可能一>项目存在重复资源文件 可能二>Android Studio与源代码Android Studio不一致 解决方法有: 解决一>查找重复资源,删除或者修改文件 解决二 ...
- Ajax——php基础知识(三)
上传文件 1.get是传不了文件的,只能用post 2.enctype需要重新设置,默认是application/x-www-form-urlencoded,会在发送到服务器之前,所有字符都会进行编码 ...
- CSS——规避脱标流和vertical-align
规避脱标流: 1.尽量使用标准流. 2.标准流解决不了的使用浮动. 3.浮动解决不了的使用定位. 问题解决:嵌套盒子在不使用定位的情况下定位到右上角 <!DOCTYPE html> < ...
- php入门学习笔记
学习笔记[6.5-6.13] 1.常用命令 打开数据库格式: mysql -h主机地址 -u用户名 -p 重启nginx:sudo /etc/init.d/nginx restart或者service ...