移动端点击延迟300毫秒----FastClick用法

为什么要使用FastClick？

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

FastClick的使用

1.安装FastClick

使用npm安装

npm install fastclick

在页面引用fastclick.js

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

纯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函数

 

2.使用needsclick过滤特定的元素

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

<a class="needclick">Ignoted by FastClick</a>

3.不需要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

 

标签：FastClick,浏览器,300,毫秒,点击,fastclick,事件,document
来源： https://www.cnblogs.com/helloyoyo/p/12565055.html