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)
blank

相关推荐

  • pmp培训机构哪个好?各pmp培训机构排名如何?[通俗易懂]

    pmp培训机构哪个好?各pmp培训机构排名如何?[通俗易懂]PMP机构排名的话,没有官方数据,但是好一点的机构的通过率普遍在95%以上,还是很不错的。刚好我写了一篇机构对比的文章,主流机构都有,你可以看看大魔王阿:【PMP机构推荐】PMP培训机构如何选择,斥巨资报班对比,全面避坑指南下面说下我收集的每个机构的优缺点:乐凯:优点:趣味性、互动性好,课程没有时间限制,可以一直学缺点:上课是在钉钉,一个办公平台,不太专业。乐凯算是新兴机构里面做的不错的,应该是18年成立的,我在B站听过他们的课,主讲JIM老师是他们家的

    2022年10月26日
  • C++ 读写TXT文件

    C++ 读写TXT文件 一、文件的输入输出二、从txt文件中读取二维数组(int以及string)三、从txt文件读取的数据存到struct中 参考博客:https://blog.csdn.net/u013749068/article/details/78761553     http://www.cnblogs.com/helinsen/archive/2012/07/26/2609…

  • 微信二维码登录原理是什么_请使用微信扫描二维码登录

    微信二维码登录原理是什么_请使用微信扫描二维码登录网页登陆是微信4.2以后版本提供的一种全新的登陆方式。用户只需要用手机扫一扫微信网页中的二维码,就能马上实现微信网页登陆。这种登陆方式虽然炫酷,但是多少有些违背直觉:网页端是怎么知道是哪个微信账号

  • Matlab画图颜色「建议收藏」

    Matlab画图颜色「建议收藏」matlab绘图配色

  • sesvc.exe_alg是什么进程

    sesvc.exe_alg是什么进程今天公司的一台电脑一点右键就没有反应,通过任务管理发现每次启动都会有一个“Excel”进程,第一感觉就是中毒了,在网上找到了无暇解决方案杀毒方法:(切记:在操作过程中使用“右键->打开”,不可双击。)1.结束注册表中的fun.xls.exe的进程(建议选中fun.xls.exe->右键->转到进程,查找到“algsrvs.exe”单击它,再选择“…

  • C语言例题:输入两个正整数m和n,求其最大公约数和最小公倍数。

    C语言例题:输入两个正整数m和n,求其最大公约数和最小公倍数。题目:输入两个正整数m和n,求其最大公约数和最小公倍数。

发表回复

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

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