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. 51nod 1353 树

    树背包 设f[i][j]表示第i个点,和子节点组成的联通块大小为j,其他都可行的方案 j=0表示可行的总方案 #include<cstdio> #include<iostream&g ...

  2. 【POJ 1328】 Radar Installation

    [题目链接] http://poj.org/problem?id=1328 [算法] 每个雷达都位于笛卡尔坐标系的x轴上,因此,对于每个岛屿,我们都可以用勾股定理算出它的有效管辖区域 那么,问题就被转 ...

  3. 洛谷 P4149 [ IOI 2011 ] Race —— 点分治

    题目:https://www.luogu.org/problemnew/show/P4149 仍然是点分治: 不过因为是取 min ,所以不能用容斥,那么子树之间就必须分开算,记录桶时注意这个: 每次 ...

  4. JSP-Runoob:JSP 服务器响应

    ylbtech-JSP-Runoob:JSP 服务器响应 1.返回顶部 1. JSP 服务器响应 Response响应对象主要将JSP容器处理后的结果传回到客户端.可以通过response变量设置HT ...

  5. 58. Extjs grid CheckboxSelectionModel 单选

    转自:https://kabuka.iteye.com/blog/581823 默认的 new Ext.grid.CheckboxSelectionModel 都是可以多选的,但是有时候需要控制单选时 ...

  6. 湖南集训Day1

    难度 不断网:☆☆☆ 断网:☆☆☆☆ /* 卡特兰数取模 由于数据范围小,直接做. 考试时断网.忘记卡特兰数公式,推错了只有5分. 数学公式要记别每次都现用现搜!!! */ #include<i ...

  7. native2ascii运用

    1.native2ascii命令行的格式 native2ascii -[option] [inputfile [outputfile]] 说明: -[option]:表示命令开关,有两个选项可供选择: ...

  8. Saiku导出excel指标列无线条以及0与空值显示问题(三十二)

    Saiku导出excel指标列无线条以及0与空值显示问题 描述: 数据库中字段值为0 ,与数据库中字段值为 null 时 ,saiku会将为0 以及为 null 的数据都不展示出来,但是我们其实希望数 ...

  9. Netty编解码技术和UDP实现

    背景 作为网络传输框架,免不了传输对象,对象在传输之前就要序列化,这个序列化的过程就是编码过程.接收到编码后的数据就需要解码,还原传输的数据. 编解码技术就是java序列化技术,序列化的目的有两个,一 ...

  10. JS 正则查找与替换

    JS正则查找与替换 一.前提/背景 今天遇到个问题,需要替换字符串中部分字符,这些字符相对整个字符串而言,与其他子字符串类似,无法单独提出:重要的是,该字符串是动态的生成的,就像我们日常看到的网页Ur ...