README

安装

Composer

composer require gaomingcode/fastclick

原始ReadMe

FastClick是一个简单、易于使用的库，用于消除移动浏览器上物理触摸和触发点击事件之间的300ms延迟。目标是使您的应用感觉不那么卡顿，更响应，同时避免与当前逻辑的任何干扰。

FastClick由FT Labs开发，FT Labs是《金融时报》的一部分。

注意：截至2015年底，大多数移动浏览器（特别是Chrome和Safari）不再有300ms的触摸延迟，因此FastClick在较新的浏览器上没有好处，并且可能会将错误引入您的应用。请仔细考虑您是否真的需要使用它。

法语说明.

日语说明。

延迟为什么存在？

根据Google

...移动浏览器将在您触摸按钮后等待大约300ms来触发点击事件。这是因为浏览器正在等待看您是否实际上执行了双击。

兼容性

该库已作为FT Web App的一部分部署，并在以下移动浏览器上经过测试

• iOS 3及以上的Mobile Safari
• iOS 5及以上的Chrome
• Android (ICS)上的Chrome
• Opera Mobile 11.5及以上的版本
• Android 2及以上的Android浏览器
• PlayBook OS 1及以上的版本

不需要时

FastClick不会在桌面浏览器上附加任何监听器。

带有width=device-width的viewport元标签的Android 32+上的Chrome没有300ms延迟，因此不会附加监听器。

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

同样适用于带有viewport元标签中user-scalable=no的Android（所有版本）上的Chrome。但请注意，user-scalable=no还会禁用缩放手势，这可能会引起可访问性问题。

对于IE11+，您可以使用touch-action: manipulation;在特定元素（如链接和按钮）上禁用双击缩放。对于IE10使用-ms-touch-action: manipulation。

使用方法

将fastclick.js包含在您的JavaScript包中或将其添加到HTML页面，如下所示

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

必须在将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中，或者您可以通过下载预压缩版本。

注意：预压缩版本是使用我们的构建服务构建的，该服务通过Origami.fastclick暴露FastClick对象，并将具有Browserify/CommonJS API（见上文）。

var attachFastClick = Origami.fastclick;
attachFastClick(document.body);

AMD

FastClick支持AMD（异步模块定义）。这使得它可以与AMD加载器（如RequireJS）懒加载。请注意，当使用AMD风格的require时，将返回完整的FastClick对象，而不是FastClick.attach。

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

包管理器

您可以使用Component、npm或Bower安装FastClick。

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

高级

使用needsclick忽略某些元素

有时您需要FastClick忽略某些元素。您可以通过添加needsclick类轻松做到这一点。

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

用例1：需要非合成点击

内部，FastClick使用document.createEvent在浏览器触发touchend事件后立即触发一个合成的click事件。然后它会抑制随后由浏览器创建的额外click事件。在某些情况下，浏览器创建的非合成click事件是必需的，如触发焦点示例中所述。

这就是needsclick类发挥作用的地方。将此类添加到需要非合成点击的任何元素。

用例2：Twitter Bootstrap 2.2.2下拉菜单

使用needsclick类的另一个例子是Twitter Bootstrap 2.2.2中的下拉菜单。Bootstrap为下拉菜单添加了自己的touchstart监听器，因此您希望告诉FastClick忽略这些。如果不这样做，触摸设备将在点击时自动关闭下拉菜单，因为FastClick和Bootstrap都执行合成点击，一个打开下拉菜单，第二个立即关闭。

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

示例

FastClick旨在处理许多不同的浏览器怪异行为。以下是一些示例来阐述这一点

• 基本用法显示了感知响应性的提高
• 触发焦点在输入元素上的click处理程序
• 输入元素永远不会接收点击，但快速获得焦点

测试

没有自动测试。在tests/中的文件是手动简化的测试案例。我们已经考虑了如何最好地测试这些案例，但它们往往非常特定于浏览器/设备，有时具有主观性，这意味着测试并不那么简单。

致谢和协作

FastClick由Rowan Beentje、Matthew Caruana Galizia和Matthew Andrews在FT Labs维护。FT Labs发布的所有开源代码均许可在MIT许可证下。我们欢迎评论、反馈和建议。请随时提出问题或拉取请求。