fastclick原理剖析及其用法
移动端点击延迟事件
- 移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟。
- 原因: 移动端的双击会缩放导致click判断延迟。
这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件,才有了FastClick。
解决方式
禁用缩放
<meta name = "viewport" content="user-scalable=no" >
缺点: 网页无法缩放更改默认视口宽度
<meta name="viewport" content="width=device-width">
缺点: 需要浏览器的支持css touch-action touch-action的默为 auto,将其置为 none 即可移除目标元素的 300 毫秒延迟 缺点: 新属性,可能存在浏览器兼容问题
tap事件 zepto的tap事件, 利用touchstart和touchend来模拟click事件
缺点: 点击穿透fastclick 原理: 在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后真正的click事件阻止掉
缺点: 脚本相对较大
使用:
//JS
// 引入
<script type='application/javascript' src='/path/to/fastclick.js'></script>
// 使用了jquery的时候
$(function() { FastClick.attach(document.body); });
// 没使用jquery的时候
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded',
function() {
FastClick.attach(document.body);
}, false);}
在vue中使用 :
//js
// 安装
npm install fastclick -S
// 引入
import FastClick from 'fastclick'
// 使用
FastClick.attach(document.body);
不需要使用fastclick的情况
以下这几种情况是不需要使用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
问题BUG
引入fastclick.js ,ios点击输入框之后,点击软键盘上的 完成 时发现,轻击input就无法唤起软键盘,无法对输入框聚焦,必须长按或重压才行,ios11 后修复了移动点击300ms延迟
解决方法:在node_module里找到fastClick文件
FastClick.prototype.focus = function(targetElement) {
var length; // Issue #160: on iOS 7, some input elements (e.g. date datetime month) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724.
if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
length = targetElement.value.length;
targetElement.setSelectionRange(length, length);
//修复bug ios11.3以上版本不弹出键盘,这里加上聚焦代码,让其强制聚焦弹出键盘
targetElement.focus();
} else {
targetElement.focus();
}
};
另外一种思路是 在 每一个input 强制加一个点击事件,点击后,聚焦 focus 即可。
参考:https://github.com/ftlabs/fastclick
fastclick原理剖析及其用法的更多相关文章
- xargs的原理剖析及用法详解
转载请注明出处:http://www.cnblogs.com/f-ck-need-u/p/5925923.html 学习这个xargs花了很长时间,在网上翻了很久也查了很多书关于xargs的介绍,都只 ...
- xargs原理剖析及用法详解
bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 学习这个xargs花了很长时间,在网上翻了很久也查了很多书关于 ...
- 基本功 | Litho的使用及原理剖析
1. 什么是Litho? Litho是Facebook推出的一套高效构建Android UI的声明式框架,主要目的是提升RecyclerView复杂列表的滑动性能和降低内存占用.下面是Litho官网的 ...
- ext文件系统机制原理剖析
本文转载自ext文件系统机制原理剖析 导语 将磁盘进行分区,分区是将磁盘按柱面进行物理上的划分.划分好分区后还要进行格式化,然后再挂载才能使用(不考虑其他方法).格式化分区的过程其实就是创建文件系统. ...
- ASP.NET Core 运行原理剖析2:Startup 和 Middleware(中间件)
ASP.NET Core 运行原理剖析2:Startup 和 Middleware(中间件) Startup Class 1.Startup Constructor(构造函数) 2.Configure ...
- ASP.NET Core 运行原理剖析1:初始化WebApp模版并运行
ASP.NET Core 运行原理剖析1:初始化WebApp模版并运行 核心框架 ASP.NET Core APP 创建与运行 总结 之前两篇文章简析.NET Core 以及与 .NET Framew ...
- 【Xamarin挖墙脚系列:Xamarin.IOS机制原理剖析】
原文:[Xamarin挖墙脚系列:Xamarin.IOS机制原理剖析] [注意:]团队里总是有人反映卸载Xamarin,清理不完全.之前写过如何完全卸载清理剩余的文件.今天写了Windows下的批命令 ...
- 【Xamarin 跨平台机制原理剖析】
原文:[Xamarin 跨平台机制原理剖析] [看了请推荐,推荐满100后,将发补丁地址] Xamarin项目从喊口号到现在,好几个年头了,在内地没有火起来,原因无非有三,1.授权费贵 2.贵 3.原 ...
- iPhone/Mac Objective-C内存管理教程和原理剖析
http://www.cocoachina.com/bbs/read.php?tid-15963.html 版权声明 此文版权归作者Vince Yuan (vince.yuan#gmail.com)所 ...
随机推荐
- 使用jQuery增加或删除元素(内容)
使用jQuery增加或删除元素(内容):一.jQuery添加元素或内容:1,append() 方法:在被选元素的结尾插入元素或内容 2,prepend() 方法:被选元素的开头插入元素或内容. 3,a ...
- oracle学习笔记(一) oracle 体系结构简单介绍以及创建表空间和用户
体系结构 oracle数据服务器由oracle数据库和实例组成 实例由后台进程和内存结构组成 内存结构由共享池,数据缓冲区,日志缓存区 Oracle数据库是通过表空间来存储物理表的,一个数据库实例可以 ...
- Docker的介绍及安装
什么是Dcoker? 引用度娘的解释:Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 linux 机器上,也可以实现虚拟化.容器 ...
- spring boot拦截器中获取request post请求中的参数
最近有一个需要从拦截器中获取post请求的参数的需求,这里记录一下处理过程中出现的问题. 首先想到的就是request.getParameter(String )方法,但是这个方法只能在get请求中取 ...
- GridContrl 通用类
using DevExpress.Data; using DevExpress.Utils; using DevExpress.XtraGrid.Views.Grid; using System; u ...
- 小tips:JS的Truthy和Falsy(真值与假值)
前言 Truthy 不等于 ture,他是指是在Boolean上下文中转换后的值为真的值.我的理解是,在javascript中所有表达式为true的值.同理Falsy指的是在javascript中所有 ...
- pythonmysql运行报错解决过程中遇到的其中一个报错解决文章来源
本文章仅记录下面报错的解决文章来源:error: command 'C:\Users\Administrator\AppData\Local\Programs\Common\Micr osoft\Vi ...
- vue环境搭建及项目介绍
搭建开发环境(搭建开发环境前必须安装node.js): 1.安装vue脚手架工具 $ npm install -g vue-cli 2.创建项目(注意项目名字不要有大写字母) vue init < ...
- 27号华为笔试(三道ac两道)
三道题目case:100,100,0: 三个题目: 前两个都全部ac了,第三题没时间: 记录一下大概的思路: 第一题 主要通过Java中的字符串处理函数:然后控制字符串输入格式: 卡bug的点: 1: ...
- Redis 由浅入深
1.redis是什么? redis是nosql(也是个巨大的map) 单线程,但是可处理1秒10w的并发(数据都在内存中) 使用java对redis进行操作类似jdbc接口标准对mysql,有各类实现 ...