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毫秒延迟的更多相关文章

  1. vue.js 添加 fastclick的支持 处理移动端click事件300毫秒延迟

    fastclick:处理移动端click事件300毫秒延迟. 1,先执行安装fastclick的命令 npm install fastclick 2,在main.js中引入,并绑定到body. imp ...

  2. 移动端click事件出现300ms延迟

    问题分析: 双击缩放是指手在屏幕上快速点击两次,iOS自带的Safari浏览器会将网页缩放至原始比例.当用户在屏幕上单击某元素时,浏览器会先捕获此处单击,但浏览器不知道用户是要单击链接还是要双击该部分 ...

  3. h5开发app,移动端 click 事件响应缓慢的解决方案

    造成点击缓慢的原因 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 使用 ...

  4. 处理移动端click事件300ms延迟的好方法—FastClick

    下载地址:https://github.com/ftlabs/fastclick 1.click事件为什么有延迟? “...mobile browsers will wait approximatel ...

  5. 移动端click事件延迟300ms的原因以及解决办法

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...

  6. 移动端click事件延迟300ms到底是怎么回事,该如何解决?

    不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...

  7. 移动端click事件延迟300ms的原因以及解决办法[转载]

    原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...

  8. 移动端click事件300ms延迟

    移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...

  9. 苹果浏览器移动端click事件延迟300ms的原因以及解决办法

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...

随机推荐

  1. Android 完全退出应用程序

    随着业务逻辑越来越复杂,退出应用程序也不像之前那个直接将Activity finish()掉就可以了,在网上看到很多完全退出App的文章,但是实践之后发现,并不像文章中描述的那样,不是方法过时了,就是 ...

  2. java web中路径问题。

    转自:http://blog.csdn.net/liang5630/article/details/38474543 如有侵权,请及时联系本人及时删除 在java web种经常出现 404找不到网页的 ...

  3. POJ 2195 Going Home 最小费用流

    POJ2195 裸的最小费用流,当然也可以用KM算法解决,但是比较难写. 注意反向边的距离为正向边的相反数(因此要用SPFA) #include<iostream> #include< ...

  4. Tool:安全狗

    ylbtech-Tool:安全狗 安全狗,互联网安全品牌,云安全服务与解决方案提供商 .企业用户遍布互联网金融.电商.游戏.移动互联网.政府单位等多个行业. 1.返回顶部 1.   2. 2.返回顶部 ...

  5. 43. ExtJs控件属性配置详细

    转自:https://www.cnblogs.com/mannixiang/p/6558225.html 序言:    1.本文摘自网络,看控件命名像是4.0以前的版本,但控件属性配置仍然可以借鉴(不 ...

  6. 9.15NOIP模拟题

    GRYZ 模拟考试套题 9.15 gryz信息组专场 题目名称 最初的最初 太 妃 糖 可执行文件名 eat hwc dance sugar 输入文件 eat.in hwc.in dance.in s ...

  7. Windows和Centos下Docker的安装配置

    Windows和Centos下Docker的安装配置 windows环境下的安装(win10) 在Windows系统上需要利用toolbox来安装Docker,现在 Docker 有专门的 Win10 ...

  8. 去掉myeclipse的预览窗口

    1,选择菜单: windows -> preferences2,在弹出窗口中选择General-> Editors -> FileAssociations3,在上方框内选择*.jsp ...

  9. Java系列学习(十一)-内部类

    1.内部类 (1)把类定义在另一个类的内部,该类就称为内部类 (2)内部类的访问规则 A:内部类可以直接访问外部类的成员,包括私有 B:外部类要想访问内部类的成员,必须创建对象 (3)内部类的分类 A ...

  10. Win32双缓冲讲解

    双缓冲是一种思想,也是一种方法,它可以避免频繁的闪烁问题.如果在画布上直接绘画,由于每次都会重新擦除然后重绘,绘制需要时间,所以肉眼会看到闪烁问题.解决的方法就是在内存中先创建出一个内存dc,然后在内 ...