fastclick

转自 https://www.jianshu.com/p/150c305f6930 为什么要使用FastClick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，才有了FastClick。 项目地址： https://github.com/ftlabs/fastclick FastClick的使用 安装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',

申明！！！最后发现判断有误，各位读读就好，正在研究中.....尼玛水太深了 前言 近期使用tap事件为老夫带来了这样那样的问题，其中一个问题是解决了点透还需要将原来一个个click变为tap，这样的话我们就抛弃了ie用户 当然可以做兼容，但是没人想动老代码的，于是今天拿出了fastclick这个东西， 这是最近第四次发文说tap的点透事件，我们一直对解决“点透”的蒙版耿耿于怀，于是今天老大提出了一个库fastclick，最后证明解决了我们的问题 而且click不必替换为tap了，于是我们老大就语重心长的对我说了一句，你们就误我吧，我邮件都发出去了...... 于是我下午就在看fastclick这个库，看看是不是能解决我们的问题，于是我们开始吧 读fastclick源码 尼玛使用太简单了，直接一句： FastClick.attach(document.body); 于是所有的click响应速度直接提升，刚刚的！什么input获取焦点的问题也解决了！！！尼玛如果真的可以的话，原来改页面的同事肯定会啃了我 一步步来，我们跟进去，入口就是attach方法： 1 FastClick.attach = function(layer) { 2 'use strict'; 3 return new FastClick(layer); 4 }; 这个兄弟不过实例化了下代码

1. IOS移动端click事件300ms的延迟响应 移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的, 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。 双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接<a href="#"></a>，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒

点透： 点透主要是由于两个div重合，例如：一个div调用show()，一个div调用hide()；这个时候当点击上面的div的时候就会影响到下面的那个div； 解决办法主要有2种： 1.github上有一个叫做fastclick的库，它也能规避移动设备上click事件的延迟响应， https://github.com/ftlabs/fastclick 将它用script标签引入页面（该库支持AMD，于是你也可以按照AMD规范，用诸如require.js的模块加载器引入），并且在dom ready时初始化在body上，如 ： $(function(){ new FastClick(document.body); }) 然后给需要“无延迟点击”的元素绑定click事件（注意不再是绑定zepto的tap事件）即可。 当然，你也可以不在body上初始化它，而在某个dom上初始化，这样，只有这个dom和它的子元素才能享受“无延迟”的点击 进一步，对于zepto，如果你打算继续使用它，那么它的tap相关事件已经没有用了，我们可以自己build一个无“touch”模块的zepto，以便减小zepto文件的大小和提高运行效率。zepto的github页面有定制化模块的方法，见 https://github.com/madrobby/zepto 的building部分。 2 . 根据分析

FastClick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，就有了FastClick。 安装fastclick可以使用npm，Component和Bower。另外也提供了Ruby版的gem fastclick-rails 以及.NET提供了 NuGet package 。 npm install fastclick 　import FastClick from ' fastclick '; 　Vue.use(FastClick); 　//在main.js中引入，并绑定到body。 import FastClick from 'fastclick' FastClick.attach(document.body); 最近发现升级到ios11.3之后，输入框点击变得不灵敏，第二次点击页面中的输入框需要长按一会才能正常唤起键盘输入。 解决方案 FastClick.js原文件的FastClick.prototype.focus FastClick.prototype.focus = function(targetElement) { var length; if (deviceIsIOS && targetElement.setSelectionRange && targetElement

1、在vue项目中安装fastclick插件 npm install --save fastclick 2、在main.js中引入并绑定到body import FastClick from 'fastclick' FastClick.attach(document.body); 3、在项目中安装fastclick成功后测试会遇到以下问题： os input点击不灵敏 解决方法： vue项目中使用fastclick时ios input点击不灵敏 FastClick.prototype.focus = function(targetElement) { var length; var deviceIsWindowsPhone = navigator.userAgent.indexOf("Windows Phone") >= 0; var deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent) && !deviceIsWindowsPhone; //兼容处理:在iOS7中，有一些元素（如date、datetime、month等）在setSelectionRange会出现TypeError //这是因为这些元素并没有selectionStart和selectionEnd的整型数字属性，所以一旦引用就会报错

原理 在检测到touchend事件后, 会通过dom自定义事件模拟一个click事件,并把浏览器300ms之后真正触发的点击事件屏蔽掉，fastclick是不会对PC浏览器添加监听事件 使用 1、引入fastclick.js 2、给body所有的元素绑定click事件,之后click事件就可以正常使用 情况一：使用jquery // js引入 <script type='application/javascript' src='/path/to/fastclick.js'></script> $(function() { FastClick.attach(document.body); }); 情况二：没用jquery // js引入 <script type='application/javascript' src='/path/to/fastclick.js'></script> if ('addEventListener' in document) { 　　 document.addEventListener('DOMContentLoaded', function() { 　　FastClick.attach(document.body); 　　 }, false); } 情况三：AMD var FastClick = require('fastclick');

解决方案： （1）设置不能缩放： user-scalable=no 　　不能缩放就不会有双击缩放操作，因此click事件也就没了300ms延迟，这个是Chrome首先在Android中提出的 （2）设置显示宽度： width=device-width 　　Chrome 开发团队在 Chrome 32 这一版中，他们将在包含 width=device-width 或者比 viewport 值更小的页面上禁用双击缩放。 （3）IE的指针事件 (Pointer Events)： touch-action:none 　　根据规范，touch-action 属性决定 “是否触摸操作会触发用户代理的默认行为。这包括但不限于双指缩放等行为”。 （4）vue项目 fastclick插件 　　1、项目根目录打开powershell ，执行 npm install fastclick --save 命令安装 fastclick 插件 　　2、在 根目录 —> src —> main.js 中引入 fastclick 插件 import fastClick from 'fastclick' 　　3、在 main.js 中，调用 fastclick 插件 fastClick.attach(document.body) 来源： https://www.cnblogs.com/whoamimy/p

移动端点击延迟事件 1. 移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟 2. 原因: 移动端的双击会缩放导致click判断延迟 解决方式 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事件阻止掉 缺点: 脚本相对较大 使用: ```JS // 引入 <script type='application/javascript' src='/path/to/fastclick.js'></script> // 使用了jquery的时候 $