解决触摸屏设备click事件300ms的延迟的问题
从点击屏幕上的元素到触发元素的 click 事件,移动浏览器(触摸屏)会有大约 300 毫秒的等待时间。为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作。300ms的等待时间,会让用户体验大大折损,fastclick.js库很好的解决了这个问题。
使用FastClick的时候,在需要使用的层上,实例化它。我们使用document.body是因为希望所有的按钮和链接都获得快速点击。
使用方法:
window.addEventListener('load', function() {
FastClick.attach(document.body);
}, false);
然后直接使用onclick事件,就不会有原先300ms延迟的问题了。
另外,还有一种方法解决延迟问题,就是使用zepto.js库的tap事件,但是tap事件在特殊情况下会存在点透,所以在这里推荐使用fastclick.js库。
解决触摸屏设备click事件300ms的延迟的问题的更多相关文章
- 解决移动端click事件300ms延迟的问题
方法1.部分浏览器的<meta>标签加上width=device-width就能解决. 方法2.引入fastclick.js库 <!DOCTYPE html> <html ...
- 处理移动端click事件300ms延迟的好方法—FastClick
下载地址:https://github.com/ftlabs/fastclick 1.click事件为什么有延迟? “...mobile browsers will wait approximatel ...
- 分享一个移动项目中消除click事件点击延迟的方法
对于前端工程师来说,apicloud无疑给我们提供了很好的平台,有各种各样的模块供我们使用,但是在实际项目的时候,很大部分的代码,还是需要我们用html css js来实现的.但是呢,移动端页面对于c ...
- fastclick:处理移动端click事件300毫秒延迟
fastclick:处理移动端click事件300毫秒延迟 1.兼容性 iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome Android上的Chrome(ICS) Opera ...
- vue.js 添加 fastclick的支持 处理移动端click事件300毫秒延迟
fastclick:处理移动端click事件300毫秒延迟. 1,先执行安装fastclick的命令 npm install fastclick 2,在main.js中引入,并绑定到body. imp ...
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...
- 5步解决移动设备上的300ms点击延迟
译者:jmouse 大多数基于触摸的浏览器设备,在点击时都会有个 300ms 的事件触发等待时间,做过 web app 开发的同学应该都遇到过这个情况,通过下面的5步可以轻松搞定这个延迟. 1.不要太 ...
- 移动端click事件300ms延迟
移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...
- 解决jquery绑定click事件出现点击一次执行两次问题
问题定位:通过浏览器F12定位到点击一次出现两次调用. 问题复现: $("#mail_span").on("click",function(){ ...
随机推荐
- C++ 一些笔记
1.指针.引用和const ; int &a = i; int *p ; int *&r=p;//r是对指针的引用 r=&i;//实质上是将p指向i *r=;//实质上是将i的 ...
- Linux IO漫谈
本文为原创,转载请注明:http://www.cnblogs.com/gistao/ Background IO可能是我们接触最频繁的系统调用,比如printf到终端,send content到对端, ...
- C#生成随机字符串(数字,字母,特殊符号)
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 《java编程思想》读书笔记(一)开篇&第五章(1)
2017 ---新篇章 今天终于找到阅读<java编程思想>这本书方法了,表示打开了一个新世界. 第一章:对象导论 内容不多但也有20页,主要是对整本书的一个概括.因为已经有过完整JAV ...
- ZipArchive之C++编译和调用
由于要用到zip的解压,就上网下载了CZipArchive类的源码(还是2000年的),里面有个示例,稍微修改下,就能正常运行. 就高兴地把lib拿出来,放到项目中了.捣鼓了快一个下午了,死活编译不通 ...
- 关于python怎样编写登录接口
把今天的成果展示下,关于怎么用python编写登录接口, 要求是 1.输入用户名和密码 2.输错三次密码就锁定用户 3.认证成功后输出欢迎信息 账号文件内容如下: sanjiang sanjian ...
- ubuntu 16.04 启用root用户方法
引用:http://blog.csdn.net/sunxiaoju/article/details/51993091 1.使用:sudo passwd root设置root的密码,如下图所示: 2.使 ...
- Android学习十:appcompat_v7相关
error: Error retrieving parent for item: No resource found that matches the given name 'android:Wind ...
- Android应用开发-Activity(重制版)
Android四大组件:Activity,Service,Broadcast Receiver,Content Provider Activity是Context的子类,同时实现了Window.Cal ...
- nginx(tengine)的一些小优化(持续更新)
1.nginx日志切割脚本 需求来源:nginx本身并没有日志切割的功能,由访问产生的大日志很难进行分析. 实现目的:每天对nginx日志进行切割,并备份至指定文件夹. 简要指令: mv /usr/l ...