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)所 ...
随机推荐
- 简述在ADO中使用接口的抽象数据提供程序以及ADO.NET数据提供程序工厂模型
如何在ADO中使用接口的抽象数据提供程序 在cofig中 appSettings下,配置数据连接类型 <appSettings> <!--这个键值映射到枚举值中的某个值--> ...
- Mybatis的基本要素--核心对象
大家好啊,今天呢来说下Mybatis的核心对象,也就是说基本三要素. >核心接口和类. >Mybatis核心配置文件(mybatis-config.xml) >SQL映射文件 一.下 ...
- js 控制随机数生成概率
基本思路:把Math.random()生成的数看着百分比,然后定义每个整数值取值范围. 'use strict'; export default class GL { /** * 构造函数 * @pa ...
- Umi+Dva搭建Cesium 3D开发环境
umi,中文可发音为乌米,是一个可插拔的企业级 react 应用框架,是蚂蚁金服的底层前端框架,已直接或间接地服务了 600+ 应用,包括 java.node.H5 无线.离线(Hybrid)应用.纯 ...
- Java获取图片属性
BufferdImage bfi = ImageIO.read( new File(“d:/file/img.jpg”) ); //获取图片位深度 Int imgBit = bfi.getColorM ...
- 谈下git的基本操作
在工作之后,我比较经常地接触git,关于git的用法,网上有很多的教程,而且git的指令是非常多的,强如阮一峰这样的高手也直言无法记住git的很多指令.实际上我也看了不少关于git指令的文章,个人觉得 ...
- Java中的Iterable与Iterator详解
在Java中,我们可以对List集合进行如下几种方式的遍历: List<Integer> list = new ArrayList<>(); list.add(5); list ...
- docker部署postgresql时,data目录不生效的问题探究
今天用docker部署postgresql,用的是官方的镜像.结果挂载完 /var/lib/postgresql/data目录后,和容器里的目录其实并没有挂载成功. 母机上的目录并没有成功挂载到容器里 ...
- JDBC获取数据库连接
是什么? JDBC:Java Data Base Connectivity(java数据库连接) 为什么用? sun公司提供JDBC API接口,数据库厂商来提供实现 我们需要用哪个数据库就加载那个数 ...
- about-php
鉴于本人收集的php资料多,感觉查询起来不怎么方便.特意在github上建立了一个分支:about-php 主要是介绍围绕php的相关资料,包括php入门知识,php框架,开发工具,php项目,php ...