FastClick 解决移动端300毫秒延迟

移动端点击延迟事件

1.移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件
2.原因: 移动端的双击会缩放导致click判断延迟

安装及调用FastClick

1.安装

npm i fastclick -S

2.调用

//jquery
<script type='application/javascript' src='/path/to/fastclick.js'></script>
$(function() {
    FastClick.attach(document.body);
});
//原生js
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}
//vue 
import FastClick from 'fastclick'
FastClick.attach(document.body);

使用needsclick过滤特定的元素

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

<a class="needsclick">此标签不调用fastclick</a>
使用fastclick# 导致图片上传插件在ios端失效的解决方案

传送门 : https://www.cnblogs.com/songdongdong/p/8966667.html

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容