文档章节

fastClick

安吉拉
 安吉拉
发布于 2017/09/08 15:30
字数 546
阅读 18
收藏 0

最近跟着视频看了一个vuejs+webpack+nodejs的项目(一个音乐播放器),其中用到了fastClick插件,但是并不是很了解,查了一些资料后整理了一下。

fastClick使用于在移动浏览器上发生介于轻敲及点击之间的指令时,能够让你摆脱300毫秒的延迟。FastClick可以让你的应用程序更加灵敏迅捷。支持各种移动浏览器,比如safari,chrome,opera等

...移动浏览器将等待大约300ms从您点击按钮来点击点击事件。这样做的原因是浏览器正在等待您是否正在执行双击。

什么时候不使用他

fastclick不附加任何监听器在桌面浏览器上面,所以如果你的项目不是针对的移动浏览器,那么就不要使用这个插件。

Android 设备上的 google浏览器 (Chrome) 32+ 版本,在meta头信息中设置 width=device-width 没有300毫秒的延时,所以也无需使用本插件。

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


  • Chrome浏览器在安卓设备上的时候,设置meta头信息中 user-scalable=no 但是这样就无法让用户多点触控缩放网页了。

对于IE11 + 你可以设置 touch-action: manipulation; 来禁用通过双击放大某些元素例如:链接和按钮的,对于IE10使用 -ms-touch-action: manipulation 。

使用方法

1、引入插件的JavaScript文件到你的HTML网页中,像这样:

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

注意:type属性在HTML5网页中可以省略不写。

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

实例化 fastclick 最好在body元素的前面,这是使用推荐的方法:

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

或者你使用了jQuery插件,你可以这样编写:

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

如果你使用的browserify CommonJS的模块系统或另一种风格,其fastclick.attach函数将返回 require(‘fastclick’) 。作为一个结果,使用fastclick这些装载机的最简单的方法如下:

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

 在vuejs中使用的时候,在mainjs中调用

import fastclick from 'fastclick'
fastclick.attach(document.body)

 

© 著作权归作者所有

共有 人打赏支持
安吉拉
粉丝 1
博文 35
码字总数 7547
作品 0
私信 提问
VideoJS 与 Framework7 中 fastclick 冲突问题

Framework7 由于自动启用 fastclick,会导致在 移动端下使用 video.js,控制条上的 播放和音量按钮 点击的时候会触发两次。 解决办法: 1. 全局禁用 fastclick,在 new Framework7 的时候传入...

kisshua
11/09
0
0
vue2.0移动端音乐app(1)

从0开始用vue2.0模仿做一个移动端音乐app 源码地址https://github.com/Aaron0525/Vue-music 一、环境搭建 cd vue-music npm install package.json "stylus": "^0.54.5", "stylus-loader": "^......

再这么说就哭了呦!
2017/12/05
0
0
fastclick.js --- 解决移动端点击事件300ms延时

Fast Click 是一个简单、易用的库,专为消除移动端浏览器从物理触摸到触发点击事件之间的300ms延时。 为什么会存在延迟呢? 从你触摸按钮到触发点击事件,移动端浏览器会等待接近300ms,原因...

frwupeng517
06/26
0
0
FastClick使用之trigger触发click失效

最近为了提升web app在ios上的点击效率,使用了FastClick.js,效果很明显,基本是点击后立马有反馈。可是发现一个问题,在使用模拟点击的时候,并不能触发点击的目的。 1 而以上代码,在安卓...

wecloudnet
2016/07/13
220
0
fastClick的300ms延迟解决方案

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_17775997/article/details/82315049 开发移动端项目,点击事件会有300ms延迟的问题。至于为什么会有这个...

大灰狼的小绵羊哥哥
09/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

浅析微信支付:开通免充值产品功能及如何进行接口升级指引

本文是【浅析微信支付】系列文章的第十五篇,主要讲解如何开通免充值产品功能流程和其中的注意事项,对于接口升级会重要讲解,避免爬坑。 浅析微信支付系列已经更新十五篇了哟~,没有看过的...

YClimb
45分钟前
2
0
看看ArrayDeque源码

之前看了其他实现Deque接口的类,这里再看看ArrayDeque吧,下图可以看到这个类设计的结构层次,其实Deque接口是继承了Queue接口的。用可调整大小的数组实现Deque接口。没有容量限制,他们根据...

woshixin
46分钟前
2
0
如何存储登录cookie,发送一个post类型的api请求?

其实发送post请求和get请求一样,主要就是不知道如何存储登录cookie进行发送请求,请教xx得到如下解决办法 点击右下方的cookies,填写cookies信息,如图 1填写登录的cookie名,2填写cookie的...

七曦777
46分钟前
1
0
利用cefSharp实现网页自动注册登录的需要注册的一些事项

最近朋友有个需要自动注册登录点击的事,我帮着写了写,好久没写过这东西了,在写的过程中总结了需要注意的一些事项。 一、换IP之后要测试一下速度,我目前用的最简单的测试方法就是20-30秒加...

我退而结网
54分钟前
2
0
Go语言中使用 BoltDB数据库

boltdb 是使用Go语言编写的开源的键值对数据库,Github的地址如下: https://github.com/boltdb/bolt boltdb 存储数据时 key 和 value 都要求是字节数据,此处需要使用到 序列化和反序列化。...

Oo若离oO
55分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部