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. 【Poj3241】Object Clustering

    Position: http://poj.org/problem?id=3241 List Poj3241 Object Clustering List Description Knowledge S ...

  2. Coursera Algorithms Programming Assignment 5: Kd-Trees (98分)

    题目地址:http://coursera.cs.princeton.edu/algs4/assignments/kdtree.html 分析: Brute-force implementation. ...

  3. Unity 图形学 基础知识总结

    1. 渲染流水线     三大块:应用阶段,几何阶段,光栅化阶段                       渲染图元   顶点信息    GPU流水线     顶点数据=>     顶点着色器 ...

  4. poj1200Crazy Search(hash)

    题目大意   将一个字符串分成长度为N的字串.且不同的字符不会超过NC个.问总共有多少个不同的子串. /* 字符串hash O(n)枚举起点 然后O(1)查询子串hash值 然后O(n)找不一样的个数 ...

  5. [App Store Connect帮助]二、 添加、编辑和删除用户(2)查看并编辑您的个人帐户

    您可以在 App Store Connect 的“编辑个人资料”中查看和编辑个人信息.如果您的 Apple ID 与多个帐户相关联,您可以在您的用户帐户之间切换. 查看您的个人帐户 在任意 App S ...

  6. Akka源码分析-故障恢复

    Actor故障恢复是akka中非常重要的内容,在之前的博客中虽然有介绍,但都是杂糅在其他知识点的细节中,本博客将单独介绍这一部分的故障恢复.为了简化分析的单独,本文只研究用户的actor故障恢复的步骤 ...

  7. OpenResty / Nginx模块,Lua库和相关资源的列表

    OpenResty / Nginx模块,Lua库和相关资源的列表 什么是OpenResty OpenResty是一个成熟的网络平台,它集成了标准的Nginx核心,LuaJIT,许多精心编写的Lua库, ...

  8. Android内存管理(13)常见产生内存泄漏的原因

    1.集合类泄漏 集合类如果仅仅有添加元素的方法,而没有相应的删除机制,导致内存被占用.如果这个集合类是全局性的变量 (比如类中的静态属性,全局性的 map 等即有静态引用或 final 一直指向它), ...

  9. 自定义View(9)使用Renderscript 渲染特效。

    1.渲染脚本官网 https://developer.android.com/guide/topics/renderscript/compute 2.高斯模糊 ScriptIntrinsicBlur ...

  10. applicationContext.xml配置AOP切面编程

    Computer.java package com.wh.aop2; public class Computer { public void play01(){ System.out.println( ...