fastclick

前端 工具 / 组件
一个消除移动端浏览器上的点击事件的 300ms 的延迟
2019-05-02 我要评论 12 我要收藏

FastClick

FastClick 是一个简单易用的库,它消除了移动端浏览器上的物理点击和触发一个 click 事件之间的 300ms 的延迟。目的就是在不干扰你目前的逻辑的同时,让你的应用感觉不到延迟,反应更加灵敏。

FastClick 是由 FT Labs 开发的。

为什么会存在延迟 ?

根据 Google 的说法:

...移动端浏览器会从你点击按钮之后,等待大约 300ms 才会触发点击事件。原因是浏览器会等待看你的行为是否会是双击。

兼容性

该库已经被开发成为了 FT Web App 的一部分,在下面的移动浏览器中都测试通过了:

  • Mobile Safari on iOS 3 and upwards
  • Chrome on iOS 5 and upwards
  • Chrome on Android (ICS)
  • Opera Mobile 11.5 and upwards
  • Android Browser since Android 2
  • PlayBook OS 1 and upwards

什么时候不需要它

FastClick 不会给桌面浏览器添加任何的监听器。

Android 上的 Chrome 32+ 浏览器,如果在 viewport meta tag 中添加了 width=device-width,那么就不会有 300ms 的延迟,所以,FastClick 监听器就不会被附加。

<meta name="viewport" content="width=device-width, initial-scale=1">

Android(所有版本)上的 Chrome 浏览器也是一样的,在如果在 viewport meta tag 添加了 user-scalable=no,也不会有延迟。需要注意的是,user-scalable=no 会禁用 pinch 缩放,所以这也是一个需要考虑的问题。

对于 IE11+,你可以在指定的元素(比如超链接和按钮)上使用 touch-action: manipulation; 来禁用 double-tap-to-zoom。对于 IE10,请使用 -ms-touch-action: manipulation

用法

在你的 JavaScript 文件或 HTML 页面中,像下面这样引入 fastclick.js

<script type='application/javascript' src='/path/to/fastclick.js'></script>

在页面上的任何元素上实例化 FastClick 之前,该JS文件都必须已经被加载。

要在 body(也是推荐的要应用 FastClick 的元素) 上实例化 FastClick:

if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

或者,如果你正在使用 jQuery:

$(function() {
    FastClick.attach(document.body);
});

如果你正在使用 Browserify 或者其它的 CommonJS 风格的模块系统,FastClick.attach 函数会在你调用 require('fastclick') 的时候返回。所以,用这些加载器使用 FastClick 最简单的方法如下:

var attachFastClick = require('fastclick');
attachFastClick(document.body);

AMD

FastClick 支持 AMD (Asynchronous Module Definition),这允许它被一个 AMD 加载器延迟加载,比如 RequireJS。注意,当使用 AMD 类型的加载器的时候,整个 FastClick 对象都会被返回,而不是 FastClick.attach

var FastClick = require('fastclick');
FastClick.attach(document.body, options);

包管理器

你可以使用 Componentnpm 或者 Bower 来安装 FastClick。

对于 Ruby,有一个名叫 fastclick-rails 的第三方 gem 包。对于 .NET,有一个 NuGet package

高级用法

needsclick 来忽略指定的元素

有时候,你需要在某些元素上不使用 FastClick,你可以通过添加 needsclick 样式来简单地实现:

<a class="needsclick">Ignored by FastClick</a>

使用案例 1: non-synthetic click required

Internally, FastClick uses document.createEvent to fire a synthetic click event as soon as touchend is fired by the browser. It then suppresses the additional click event created by the browser after that. In some cases, the non-synthetic click event created by the browser is required, as described in the triggering focus example.

This is where the needsclick class comes in. Add the class to any element that requires a non-synthetic click.

使用案例 2: Twitter Bootstrap 2.2.2 下拉框

另外一个什么时候使用 needsclick 样式的例子就是,在 Bootstrap 2.2.2 的下拉框下,Bootstrap 为下拉框添加了自己的 touchstart 监听器,所以你需要告诉 FastClick 忽略这些。如果你不这样做,触屏设备将会在你点击的时候,马上自动关闭这些下拉框,因为 FastClick 和 Bootstrap 都会响应这个点击事件,一个打开下拉框,然后第二个会马上关闭它。

<a class="dropdown-toggle needsclick" data-toggle="dropdown">Dropdown</a>

示例

FastClick 是为了设计来应付许多不同的浏览器怪癖,这里有一些例子来说明:

  • 基本用法 展示了添加 FastClick 和不添加的区别
  • 从一个 click 处理程序,在一个输入元素上 触发焦点
  • 输入元素 永远不会接收点击,但是会接收快速获取焦点
fastclick 相关推荐
对于该库,你有要推荐的内容么?点此提交推荐
请文明评论,与人为善,比聪明更重要!
评论