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 这种小屏幕浏览桌面端站点 ...
随机推荐
- Codeforces Round #367 (Div. 2) 套题
吐槽:只能说是上分好场,可惜没打,唉 A:Beru-taxi (水题,取最小值) #include <cstdio> #include <cstring> #include & ...
- 华为FusionSphere概述——计算资源、存储资源、网络资源的虚拟化,同时对这些虚拟资源进行集中调度和管理
华为FusionSphere概述 FusionSphere是华为自主知识产权的云操作系统,集虚拟化平台和云管理特性于一身,让云计算平台建设和使用更加简捷,专门满足企业和运营商客户云计算的需求.华为云操 ...
- 【POJ 3974】 Palindrome
[题目链接] http://poj.org/problem?id=3974 [算法] 解法1 : 字符串哈希 我们可以分别考虑奇回文子串和偶回文子串,从前往后扫描字符串,然后二分答案,检验可以用哈希 ...
- [luogu_U15116]珈百璃堕落的开始
https://www.zybuluo.com/ysner/note/1239458 题面 给定\(n\)个二元组\((x,y)\),问有多少种方案,使得选出其中几个后,\(\sum x=\sum y ...
- bzoj1997 [Hnoi2010]Planar——2-SAT
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1997 神奇的经典2-SAT问题! 对于两个相交的区间,只能一里一外连边,所以可以进行2-SA ...
- Kconfig详解-文件的基本要素 ***
当执行make menuconfig时会出现内核的配置界面,所有配置工具都是通过读取"arch/$(ARCH)Kconfig"文件来生成配置界面,这个文件就是所有配置的总入口,它会 ...
- openStack aio 测试
- 解决 EF where<T>(func) 查询的一个性能问题
前两年帮朋友 做了个网吧管理软件,采用动软的三层架构 sql语句生成的.最近因功能变更 要改动,而我这段正在做asp.net mvc +ef+autofac的一个电商网站.索性 就把原来的底层全重新了 ...
- android 中activity 属性说明(转载)
转自:http://liuwuhen.iteye.com/blog/1759796 activity是android中使用非常平凡的一种组件,我们除了需要掌握activity中的生命周期以外,还需要掌 ...
- discuz的全局变量
$_G 保存了 discuz! 中所有的预处理数据 缓存能够很好的提高程序的性能,一些配置数据没必要每次都查询数据库,只要在修改了的时候更新下缓存即可. Discuz! 中所有的缓存保存在 $_G[c ...