文档章节

fastClick

安吉拉
 安吉拉
发布于 2017/09/08 15:30
字数 546
阅读 12
收藏 0
点赞 0
评论 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
FastClick使用之trigger触发click失效

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

wecloudnet
2016/07/13
220
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源码有感】彻底解决tap“点透”,提升移动端点击响应速度

申明!!!最后发现判断有误,各位读读就好,正在研究中.....尼玛水太深了 前言 近期使用tap事件为老夫带来了这样那样的问题,其中一个问题是解决了点透还需要将原来一个个click变为tap,这样...

Daniel_s
2016/01/27
190
0
zepto tap “点透”的解决

触发点透事件的原因: 由于两个div重合,例如:一个div调用show(),一个div调用hide(),这个时候当点击上层的div($up)的时候就会影响到下层的那个div($down),使其也触发相应的事件。 解决办...

尼古拉斯-赵四
2016/05/20
80
0
新年第一发--深入不浅出zepto的Tap击穿问题

问题来源 年前去阿里面试,过程中说道了fastclick解决iPhone机器上300ms点击延迟的问题,然后就被问到了zepto的“点击穿透”的现象以及产生这个具体原因,当时回答的不是很好,主要是没有特别...

乖小鬼YQ
2017/02/17
0
0
使用原生JS封装Tap事件,解决移动端300ms延迟

为了防止误操作,移动端iOS操作系统针对原生click事件做了300ms的延迟,这在一定程度上影响了我们的使用体验。 GitHub项目地址:https://github.com/SimonZhangITer/MyTapEvent FastClick 现...

Simon_ITer
2016/11/17
3K
8
移动端web开发clicktouchtap的区别讲解

移动端用tap时会有穿透问题 一:click与tap比较 click与tap都会触发点击事件,但是在手机web端,click会有200-300ms的延迟,所以一般用tap代替click作为点击事件。singleTap和doubleTap分别代...

qq_15980201的博客
2017/12/11
0
0
怎么消除一个移动项目中的click事件点击延迟

对于前端工程师来说,apicloud无疑给我们提供了很好的平台,有各种各样的模块供我们使用,但是在实际项目的时候,很大部分的代码,还是需要我们用html css js来实现的。但是呢,移动端页面对...

达斯雷马
2016/11/22
173
0
移动端JavaScript

fastClick hammer vConsole iScroll

bosscheng
2016/03/29
49
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

前端基础

1. get请求传参长度的误区 误区:我们经常说get请求参数的大小存在限制,而post请求的参数大小是无限制的。 实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是...

wenxingjun
今天
0
0
Android 复制和粘贴功能

做了一回搬运工,原文地址:https://blog.csdn.net/kennethyo/article/details/76602765 Android 复制和粘贴功能,需要调用系统服务ClipboardManager来实现。 ClipboardManager mClipboardM...

她叫我小渝
今天
0
0
拦截SQLSERVER的SSL加密通道替换传输过程中的用户名密码实现运维审计(一)

工作准备 •一台SQLSERVER 2005/SQLSERVER 2008服务 •SQLSERVER jdbc驱动程序 •Java开发环境eclipse + jdk1.8 •java反编译工具JD-Core 反编译JDBC分析SQLSERVER客户端与服务器通信原理 SQ...

紅顏為君笑
今天
6
0
jQuery零基础入门——(六)修改DOM结构

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 在《零基础入门JavaScript》的时...

JandenMa
今天
0
0
linux mint 1.9 qq 安装

转: https://www.jianshu.com/p/cdc3d03c144d 1. 下载 qq 轻聊版,可在百度搜索后下载 QQ7.9Light.exe 2. 去wine的官网(https://wiki.winehq.org/Ubuntu) 安装 wine . 提醒网页可以切换成中...

Canaan_
今天
0
0
PHP后台运行命令并管理运行程序

php后台运行命令并管理后台运行程序 class ProcessModel{ private $pid; private $command; private $resultToFile = ''; public function __construct($cl=false){......

colin_86
今天
1
0
数据结构与算法4

在此程序中,HighArray类中的find()方法用数据项的值作为参数传递,它的返回值决定是否找到此数据项。 insert()方法向数组下一个空位置放置一个新的数据项。一个名为nElems的字段跟踪记录着...

沉迷于编程的小菜菜
今天
1
1
fiddler安装和基本使用以及代理设置

项目需求 由于开发过程中客户端和服务器数据交互非常频繁,有时候服务端需要知道客户端调用接口传了哪些参数过来,这个时候就需要一个工具可以监听这些接口请求参数,已经接口的响应的数据,这种...

银装素裹
今天
0
0
Python分析《我不是药神》豆瓣评论

读取 Mongo 中的短评数据,进行中文分词 对分词结果取 Top50 生成词云 生成词云效果 看来网上关于 我不是药神 vs 达拉斯 的争论很热啊。关于词频统计就这些,代码中也会完成一些其它的分析任...

猫咪编程
今天
0
0
虚拟机怎么安装vmware tools

https://blog.csdn.net/tjcwt2011/article/details/72638977

AndyZhouX
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部