ftlabs/fastclick

# FastClick FastClick 是一个简单易用的库，用于消除移动浏览器上物理触摸与触发 `click` 事件之间 300 毫秒的延迟。其目的是让您的应用感觉不那么卡顿、响应更灵敏，同时避免干扰您当前的逻辑。 FastClick 由 [FT Labs](http://labs.ft.com/)（金融时报的一部分）开发。 *注意：自 2015 年底以来，大多数移动浏览器（尤其是 Chrome 和 Safari）不再有 300ms 的触摸延迟，因此 fastclick 对较新的浏览器没有任何好处，反而有可能给您的应用程序引入 [bug](https://github.com/ftlabs/fastclick/issues)。请仔细考虑是否真的需要使用它。* [法语说明](http://maxime.sh/2013/02/supprimer-le-lag-des-clics-sur-mobile-avec-fastclick/)。 [日语说明](https://developer.mozilla.org/ja/docs/Mozilla/Firefox_OS/Apps/Tips_and_techniques#Make_events_immediate)。 ## 为什么会有延迟？ 根据 [Google](https://developers.google.com/mobile/articles/fast_buttons) 的说法： ## 兼容性 该库作为 [FT Web App](http://app.ft.com/) 的一部分进行了部署，并在以下移动浏览器上经过了反复测试： * iOS 3 及以上版本的 Mobile Safari * iOS 5 及以上版本的 Chrome * Android (ICS) 上的 Chrome * Opera Mobile 11.5 及以上版本 * Android 2 以来的 Android Browser * PlayBook OS 1 及以上版本 ## 什么时候不需要 FastClick 不会在桌面浏览器上附加任何监听器。 如果在 [viewport meta tag](https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag) 中设置了 `width=device-width`，那么 Android 上的 Chrome 32+ 版本不会有 300ms 的延迟，因此也不会附加监听器。 ``` ``` 对于所有版本的 Android Chrome，如果在 viewport meta 标签中设置了 `user-scalable=no`，情况也是一样的。但请注意，`user-scalable=no` 同时也会禁用双指缩放，这可能会引起无障碍访问方面的问题。 对于 IE11+，你可以在某些元素（如链接和按钮）上使用 `touch-action: manipulation;` 来禁用双击缩放。对于 IE10，请使用 `-ms-touch-action: manipulation`。 ## 用法 将 fastclick.js 包含在你的 JavaScript 打包文件中，或者像这样将其添加到你的 HTML 页面中： ``` ``` 该脚本必须在页面上的任何元素上实例化 FastClick 之前加载。 要在 `body` 上实例化 FastClick，这是推荐的使用方法： ``` if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } ``` 或者，如果你使用的是 jQuery： ``` $(function() { FastClick.attach(document.body); }); ``` 如果你使用的是 Browserify 或其他 CommonJS 风格的模块系统，调用 `require('fastclick')` 时将返回 `FastClick.attach` 函数。因此，在这些加载器中使用 FastClick 的最简单方法如下： ``` var attachFastClick = require('fastclick'); attachFastClick(document.body); ``` ### 压缩版 运行 `make` 以使用 Closure Compiler REST API 构建压缩版的 FastClick。压缩后的文件会保存到 `build/fastclick.min.js`，或者你也可以 [下载预压缩版本](https://origami-build.ft.com/bundles/js?modules=fastclick)。 注意：预压缩版本是使用 [我们的构建服务](http://origami.ft.com/docs/developer-guide/build-service/) 构建的，它通过 `Origami.fastclick` 暴露 `FastClick` 对象，并提供 Browserify/CommonJS API（见上文）。 ``` var attachFastClick = Origami.fastclick; attachFastClick(document.body); ``` ### AMD FastClick 支持 AMD（异步模块定义）。这允许它使用 AMD 加载器（例如 [RequireJS](http://requirejs.org/)）进行延迟加载。请注意，使用 AMD 风格的 require 时，将返回完整的 `FastClick` 对象，而 _不是_ `FastClick.attach` ``` var FastClick = require('fastclick'); FastClick.attach(document.body, options); ``` ### 包管理器 你可以使用 [Component](https://github.com/component/component)、[npm](https://npmjs.org/package/fastclick) 或 [Bower](http://bower.io/) 来安装 FastClick。 对于 Ruby，有一个名为 [fastclick-rails](http://rubygems.org/gems/fastclick-rails) 的第三方 gem。对于 .NET，有一个 [NuGet 包](http://nuget.org/packages/FastClick)。 ## 进阶 ### 使用 `needsclick` 忽略特定元素 有时你需要 FastClick 忽略某些元素。你可以通过添加 `needsclick` 类来轻松实现这一点。 ``` Ignored by FastClick ``` #### 用例 1：需要非合成的 click 在内部，FastClick 在浏览器触发 `touchend` 时，会立即使用 `document.createEvent` 触发一个合成的 `click` 事件。然后，它会阻止浏览器之后创建的额外 `click` 事件。在某些情况下，需要由浏览器创建的非合成 `click` 事件，如 [触发焦点示例](http://ftlabs.github.com/fastclick/examples/focus.html) 中所述。 这就是 `needsclick` 类的用武之地。将此类添加到任何需要非合成 click 的元素上。 #### 用例 2：Twitter Bootstrap 2.2.2 下拉菜单 另一个使用 `needsclick` 类的例子是 Twitter Bootstrap 2.2.2 中的下拉菜单。Bootstrap 为下拉菜单添加了它自己的 `touchstart` 监听器，因此你需要告诉 FastClick 忽略它们。否则，触摸设备会在点击下拉菜单时立即将其关闭，因为 FastClick 和 Bootstrap 都执行了合成 click，一个打开了下拉菜单，第二个紧接着将其关闭。 ``` Dropdown ``` ## 示例 FastClick 旨在应对许多不同浏览器的怪癖。以下是一些用来说明这一点的示例： * [基本用法](http://ftlabs.github.com/fastclick/examples/layer.html) 展示了感知响应性的提升 * 从 `click` 处理程序中[触发焦点](http://ftlabs.github.com/fastclick/examples/focus.html) * 永远不会接收 click 但能快速获取焦点的 [input 元素](http://ftlabs.github.com/fastclick/examples/input.html) ## 测试 这里没有自动化测试。`tests/` 中的文件是手动简化的测试用例。我们曾思考过如何最好地测试这些情况，但它们往往非常依赖于特定的浏览器/设备，有时具有主观性，这意味着测试起来并非易事。 ## 致谢与合作 FastClick 由 [FT Labs](http://labs.ft.com) 的 [Rowan Beentje](http://twitter.com/rowanbeentje)、[Matthew Caruana Galizia](http://twitter.com/mcaruanagalizia) 和 [Matthew Andrews](http://twitter.com/andrewsmatt) 维护。FT Labs 发布的所有开源代码均根据 MIT 许可证授权。我们欢迎评论、反馈和建议。请随时提出 issue 或 pull request。

标签：300ms延迟, Android开发, FastClick, iOS开发, JavaScript库, Polyfill, UserAgent检测, Web性能优化, 前端体验优化, 前端脚本, 后端开发, 响应式设计, 数据可视化, 消除点击延迟, 点击事件, 用户体验, 移动浏览器兼容, 移动端优化, 触摸UI, 触摸事件