fastclick使用与解密

fastclick使用与解密fastclick可以消除点击延时提高程序的运行效率。FastClick是一个非常方便的库,在移动浏览器上发生介于轻敲及点击之间的指令时,能够让你摆脱300毫秒的延迟。FastClick可以让你的应用程序更加灵敏迅捷。支持各种移动浏览器,比如Safari、Chrome、Opera等。

大家好,又见面了,我是你们的朋友全栈君。

什么是 fastclick

FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers. The aim is to make your application feel less laggy and more responsive while avoiding any interference with your current logic.

fastclick,消除点击延时提高程序的运行效率。

为什么要使用 fastclick

According to Google:

…mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

众所周知,移动端在处理点击事件的时候,会有300毫秒的延迟。恰恰是这300毫秒的延迟,会让人有一种卡顿的体验。

这300毫秒的原因,在于早期浏览器的实现中,浏览器不知道用户触摸后,到底想做什么,所以故意等待300毫秒,再触发click事件。

既然我们已经知道了原因了,怎么解决呢?

1、直接去掉延迟

因为浏览器对 click 事件的处理,有 300ms 的延迟,而 touchstart 几乎是立即执行的,估将所有 click 事件的监听,改为 touchstart 事件的监听,即可消除这 300ms 的延迟。

但这样副作用也很大,移动端的交互体验全靠触摸,touchstart 将会干扰其他交互行为的处理,例如滚动、拖拽等。

2、缓和修复

使用 fastclick.

如何使用 fastclick

既然浏览器有这 300ms 的延迟,那么我们来代替浏览器判断,手动触发 click 事件,这也是 fastClick 的解决方案。

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

<script type="application/javascript" src="/js/fastclick.js"></script>

脚本必须加载到实例化 fastclick 在页面的任何元素之前
实例化 fastclick 最好在 body 元素的前面,这是使用推荐的方法

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

2、jQuery 中使用

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

3、如果你使用了 browserify CommonJS 的模块系统或另一种风格。

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

什么时候不使用它

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

—————————(正文完)————————————
一个前端的学习交流群,想进来面基的,可以点击这个logoVue学习交流,或者手动search群号:685486827


写在最后:
约定优于配置——-软件开发的简约原则.

——————————–
(完)————————————–

我的:
个人网站: https://neveryu.github.io/neveryu/
Github: https://github.com/Neveryu
新浪微博: https://weibo.com/Neveryu

微信

更多学习资源请关注我的新浪微博….

width=”100%” height=”500″ class=”share_self” scrolling=”no” src=”http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=550&fansRow=1&ptype=1&speed=0&skin=8&isTitle=1&noborder=1&isWeibo=1&isFans=0&uid=5346488237&verifier=d529ff3a&dpc=1″>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/150786.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • dataGrip激活码 2021_在线激活

    (dataGrip激活码 2021)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~4M7HSKPBXS-eyJsaWNlb…

  • 模糊PID算法及其MATLAB仿真(2)

    模糊PID算法及其MATLAB仿真(2)上一篇写了模糊自整定PID的理论,这篇来做MATLAB仿真。目录补充内容:如何计算临界稳定下的开环增益Ku和震荡周期TuMATLAB进行模糊PID仿真1、准备工作2、模糊控制器的设计补充内容:如何计算临界稳定下的开环增益Ku和震荡周期Tu学过控制工程或者相关理论的同学应该比较了解,判断系统稳定性的条件一般用到劳斯表(劳斯判据)。而PID控制和模糊PI…

  • mysql远程连接数据库 权限_sql远程连接数据库失败

    mysql远程连接数据库 权限_sql远程连接数据库失败我们在刚学习MySQL数据库时一般都是连接localhost然后登录root用户创建数据库进行操作,那么问题来了,如何通过其他主机来访问自己的数据库呢?一、我们要保证两台主机在同一个局域网,也就是说你使用ping命令能够ping通另一台主机,这样才可以实现远程访问你的数据库 图中192.168.116.96为对方主机的ip地址,我的IP地址为192.168.116.92,因为我们在同一…

    2022年10月13日
  • html圣杯布局,三种实现圣杯布局方法「建议收藏」

    html圣杯布局,三种实现圣杯布局方法「建议收藏」本文介绍三种实现圣杯布局的方法,前两种可归为一类,与第三种方法差别在于加载顺序不同。圣杯布局实现1:步骤1:给出HTML结构:圣杯布局1*{margin:0;padding:0;text-Align:center;}#top{background:#666;height:60px;}#left{background:#E79F6D;}#content{background:…

  • 学员管理系统(完整版)

    前言:学员管理系统是刚接触python时算是一个比较难的小项目,毕竟第一次接触这样的思维逻辑,不过用心学起来还是很有趣的,发现乐在其中,也就不觉得难了。下面给大家分享一下学员管理系统较为完整的代码(当然其中肯定有很多不足,毕竟是新手,菜鸟小程序猿,还请见谅!多谢!)言归正传:学员管理拆分为一下步骤:首先:先定义存储所有学员信息的大列表students=[]添加学员,代码如下:查…

  • VUE(相关简介及初始)

    1.什么是vueVue是一个数据驱动页面的一个框架,基于MVVM模式,M指的是数据,V值得是视图,VM是视图模型,将数据绑定视图上(双向绑定)这个框架着重于VM部分2.VUE诞生的背景近几年来

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号