跳到内容
此存储库已于2022年6月9日由所有者存档。它现在是只读的。

ftlabs/fastclick

快速点击

FastClick是一个简单易用的库,用于消除物理点击和触发点击移动浏览器上的事件。其目的是使应用程序感觉不那么滞后,响应速度更快,同时避免对当前逻辑的任何干扰。

FastClick由开发FT实验室《金融时报》的一部分。

注:截至2015年底,大多数移动浏览器,尤其是Chrome和Safari,不再有300毫秒的触摸延迟,因此fastclick在较新的浏览器上没有任何好处,并且有引入的风险漏洞到您的应用程序中。仔细考虑你是否真的需要使用它。

法语解释.

日本語で説明

为什么存在延迟?

根据谷歌:

…移动浏览器将在您点击按钮触发点击事件后等待大约300毫秒。原因是浏览器正在等待查看您是否实际在执行双击。

兼容性

库已作为英国《金融时报》网络应用程序并在以下移动浏览器上进行了测试:

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

当不需要时

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

Android上的Chrome 32+宽度=设备宽度视口元标记没有300毫秒的延迟,因此听众没有连接。

< 名称="视口"内容="宽度=设备宽度,初始刻度=1">

Android上的Chrome(所有版本)也是如此user-scalable=否在viewport meta标记中。但要注意user-scalable=否还禁用收缩缩放,这可能是一个可访问性问题。

对于IE11+,您可以使用触摸操作:操纵;禁用对某些元素(如链接和按钮)的双击缩放。供IE10使用-ms-touch-action:操纵.

用法

在JavaScript捆绑包中包含fastclick.js或将其添加到HTML页面,如下所示:

<脚本 类型='应用程序/javascript'src公司='/路径/到/fastclick.js'></脚本>

在页面的任何元素上实例化FastClick之前,必须加载脚本。

要实例化FastClick身体,这是推荐的使用方法:

如果 ('添加事件侦听器' 在里面 文件) {
	文件.添加事件侦听器(“DOMContentLoaded”, 功能() {
		快速点击.贴上(文件.身体);
	}, );
}

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

$(功能() {
	快速点击.贴上(文件.身体);
});

如果您使用的是Browserify或其他CommonJS风格的模块系统FastClick.attach(快速点击附件)调用时将返回函数require('快速单击')因此,在这些加载程序中使用FastClick的最简单方法如下:

无功功率,无功功率 附件快速点击 = 要求(“快速单击”);
连接快速点击(文件.身体);

缩小

运行制作使用Closure Compiler REST API构建FastClick的缩小版。缩小后的文件保存到build/fastclick.min.js或者你可以下载预先缩小的版本.

注意:预缩小版本是使用我们的构建服务这暴露了快速点击对象通过折纸快速点击并且将具有Browserify/CommonJS API(见上文)。

无功功率,无功功率 连接快速点击 = 折纸.快速点击;
连接快速点击(文件.身体);

AMD公司

FastClick支持AMD(异步模块定义)。这允许它使用AMD加载程序进行延迟加载,例如要求JS注意,当使用AMD样式时,需要快速点击对象将返回, FastClick.attach(快速点击附件)

无功功率,无功功率 快速点击 = 要求(“快速单击”);
快速点击.贴上(文件.身体, 选项);

程序包管理器

您可以使用安装FastClick组件,净现值法鲍尔.

对于Ruby,有一个名为快速点击轨迹。对于。NET有一个NuGet包.

高级

忽略某些元素needsclick公司

有时您需要FastClick来忽略某些元素。您可以通过添加needsclick公司类。

< ="needsclick公司">FastClick忽略</>

用例1:需要非合成点击

在内部,FastClick使用document.createEvent(文档创建事件)点燃合成物点击事件尽快触摸屏由浏览器触发。然后它会抑制额外的点击之后由浏览器创建的事件。在某些情况下,非合成点击需要浏览器创建的事件,如触发焦点示例.

这就是needsclick公司类。将类添加到任何需要非合成单击的元素中。

用例2:Twitter Bootstrap 2.2.2下拉列表

何时使用需求类在推特引导2.2.2中有下拉菜单。引导程序添加自己的触摸启动监听器,所以您想让FastClick忽略这些。如果不这样做,触摸设备会在单击下拉列表后立即自动关闭,因为FastClick和Bootstrap都会执行合成单击,一个打开下拉列表,另一个立即关闭。

< ="下拉式战斗需求"数据干扰="下拉列表">下拉列表</>

示例

FastClick旨在应对许多不同的浏览器怪癖。以下是一些示例来说明这一点:

测验

没有自动测试。中的文件测试/是手动减少的测试用例。我们已经考虑过如何最好地测试这些案例,但它们往往非常特定于浏览器/设备,有时还很主观,这意味着测试并不那么简单。

学分与协作

FastClick由维护罗文·比恩杰,马修·卡鲁阿娜·加利齐亚安瓦·沙FT实验室FT实验室发布的所有开放源码都是根据麻省理工学院的许可证获得许可的。我们欢迎评论、反馈和建议。请随时提出问题或请求。