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

原因: 移动端的双击会缩放导致click判断延迟

安装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>

在vue中使用

// 安装

npm install fastclick

-S

// 引入

import FastClick from 'fastclick'

// 使用

FastClick.attach(document.body);

// 引入

// 在jquery中使用

$(function() {

FastClick.attach(document.body);

});

// 纯js

if ('addEventListener' in document) {

document.addEventListener('DOMContentLoaded', function() {

FastClick.attach(document.body);

}, false);

}

不需要使用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

1. 禁用缩放

`<meta name = "viewport" content="user-scalable=no" > `

缺点: 网页无法缩放

2. 更改默认视口宽度

`<meta name="viewport" content="width=device-width">`

缺点: 需要浏览器的支持

3. css touch-action

touch-action的默为 auto，将其置为 none 即可移除目标元素的 300 毫秒延迟

缺点: 新属性，可能存在浏览器兼容问题

4. tap事件

zepto的tap事件, 利用touchstart和touchend来模拟click事件

缺点: 点击穿透

5. fastclick

原理: 在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉

缺点: 脚本相对较大

FastClick用法相关推荐

点击延迟_解决移动端浏览器点击延迟300ms的问题——FastClick用法
为什么要使用FastClick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,才有了FastClick. 项 ...
前端工具（运用造型）
CSS预处理器的使用方法 1.什么是css预处理器 CSS预处理器是一种专门的编程语言,用来为CSS增加一些编程特性(CSS本身不是编程语言) 不需要考虑浏览器兼容问题,因为CSS预处理器最终编译和输 ...
FastClick的用法
为什么要使用FastClick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,才有了FastClick. F ...
vue.js 使用 fastclick解决移动端click事件300毫秒延迟方法
一般情况下一些框架就自动解决了这个问题一.使用npm安装: npm install fastclick -S 二.用法: 安装完以后,可以在在main.js中全局引入,并绑定到body,全局生效.或 ...
周末读fastclick.js源码有感
看之前需要知道: // 创建一个事件对象,就好像你绑定事件回调函数里获得的那个事件对象一样 var myEvent = document.createEvent('Event')// 初始化这个事件对 ...
Vue 内 fastclick在iPhone8 plus和 iPhone X中的bug
fastclick在iPhone8 plus和 iPhone X中的bug 被一个问题困扰了半天,在微信浏览器内或者safari内, 页面顶部一个输入框, 点击时需要唤起手机的键盘,但是点击输入框时有 ...
移动端fastClick使用
作为一个新手,插件原理什么的研究不透,看的也是似懂非懂的,网上有很多大牛写的博文相当的好在这里我只是简单的记录下简单的用法,还请大牛们不吝赐教为什么存在延迟? 从点击屏幕上的元素到触发元素的 cl ...
c语言中external，static关键字用法
static用法: 在C中,static主要定义全局静态变量.定义局部静态变量.定义静态函数. 1.定义全局静态变量:在全局变量前面加上关键字static,该全局变量变成了全局静态变量.全局静态变量有 ...
Pandas_transform的用法
先来看一个实例问题. 如下销售数据中展现了三笔订单,每笔订单买了多种商品,求每种商品销售额占该笔订单总金额的比例.例如第一条数据的最终结果为:235.83 / (235.83+232.32+107.9 ...

FastClick用法

安装fastclick

使用方式

在vue中使用

// 在jquery中使用

// 纯js

不需要使用fastclick的情况

FastClick用法相关推荐

最新文章

热门文章