FastClick用法

为什么要使用FastClick

移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件,才有了FastClick。

项目地址:https://github.com/ftlabs/fastclick

FastClick的使用

安装fastclick

安装fastclick可以使用npm,Component和Bower。另外也提供了Ruby版的gem fastclick-rails以及.NET提供了NuGet package。最直接的可以在页面引入fastclick js文件。如:

在页面直接引入fastclick.js

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

使用npm安装

npm install fastclick

初始化FastClick实例

初始化FastClick实例建议在页面的DOM文档加载完成后。

纯Javascript版

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

jQuery版

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

类似Common JS的模块系统方式

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

调用require('fastclick')会返回FastClick.attach函数。

使用needsclick过滤特定的元素

如果页面上有一些特定的元素不需要使用fastclick来立刻触发点击事件,可以在元素的class上添加needsclick:

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

不需要使用fastclick的情况

以下这几种情况是不需要使用fastclick:

1、FastClick是不会对PC浏览器添加监听事件
2、Android版Chrome 32+浏览器,如果设置viewport meta的值为width=device-width,这种情况下浏览器会马上出发点击事件,不会延迟300毫秒。

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

3、所有版本的Android Chrome浏览器,如果设置viewport meta的值有user-scalable=no,浏览器也是会马上出发点击事件。
4、IE11+浏览器设置了css的属性touch-action: manipulation,它会在某些标签(a,button等)禁止双击事件,IE10的为-ms-touch-action: manipulation

参考:https://github.com/ftlabs/fastclick

版权声明:著作权归作者所有。

相关推荐

Android Room的用法

SQLite是Android内置的轻量级关系型数据库,但直接使用SQLite core包做数据库操作有以下劣势:需要编写长且重复的代码,这会很耗时且容易出错。管理SQL困难,特别对于复杂的数据库结构。Room是在这样的背景下应运而生。Room充当现有SQLite API的抽象层。 SQLiite API所有必需的包,参数,方法和变量都使用简单的注释Annot

Rxjs expand的用法分析

Rxjs的expand()函数声明:public expand(project: function(value: T, index: number), concurrent: number, scheduler: Scheduler): Observable expand()会递归调用project函数,project函数把源值映射为一个Observable,每次递归

Spring发送邮件模块的用法

环境准备Spring的邮件模块底层依赖于JavaMail,它主要目的是为应用提供一个便捷有用的发邮件工具包。邮件模块的代码在spring-context-support的jar包里,所在的package为org.springframework.mail。Maven的pom.xm需要添加javax.mail jar包的依赖<dependency>   &nb

Angular 5:HttpClient的基本用法

Angular 4.3引入了新的用于http请求的接口HttpClient。它旨在替换之前版本的接口Http。有以下新特性:对响应的body做类型检查默认返回的是JSON对象,不再需要使用json()显式解析返回的数据支持拦截器支持进度事件请求后验证和基于刷新的测试框架安装HttpClientModuleHttpClient属于@angular/common/http包的模块HttpCl

JavaScript Array map()函数的用法及误用

Array的map()函数作用是一个数组映射为另一个数组,映射方式是以原数组的元素作为输入,使用提供的回调函数对输入元素处理,处理后返回的结果作为新数组的元素。基本语法var new_array = arr.map(function callback(currentValue, index, array) {  &nb