从点击屏幕上的元素到触发元素的 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的延迟的问题的更多相关文章

  1. 解决移动端click事件300ms延迟的问题

    方法1.部分浏览器的<meta>标签加上width=device-width就能解决. 方法2.引入fastclick.js库 <!DOCTYPE html> <html ...

  2. 处理移动端click事件300ms延迟的好方法—FastClick

    下载地址:https://github.com/ftlabs/fastclick 1.click事件为什么有延迟? “...mobile browsers will wait approximatel ...

  3. 分享一个移动项目中消除click事件点击延迟的方法

    对于前端工程师来说,apicloud无疑给我们提供了很好的平台,有各种各样的模块供我们使用,但是在实际项目的时候,很大部分的代码,还是需要我们用html css js来实现的.但是呢,移动端页面对于c ...

  4. fastclick:处理移动端click事件300毫秒延迟

    fastclick:处理移动端click事件300毫秒延迟 1.兼容性 iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome Android上的Chrome(ICS) Opera ...

  5. vue.js 添加 fastclick的支持 处理移动端click事件300毫秒延迟

    fastclick:处理移动端click事件300毫秒延迟. 1,先执行安装fastclick的命令 npm install fastclick 2,在main.js中引入,并绑定到body. imp ...

  6. JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

    javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

  7. 5步解决移动设备上的300ms点击延迟

    译者:jmouse 大多数基于触摸的浏览器设备,在点击时都会有个 300ms 的事件触发等待时间,做过 web app 开发的同学应该都遇到过这个情况,通过下面的5步可以轻松搞定这个延迟. 1.不要太 ...

  8. 移动端click事件300ms延迟

    移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...

  9. 解决jquery绑定click事件出现点击一次执行两次问题

    问题定位:通过浏览器F12定位到点击一次出现两次调用. 问题复现: $("#mail_span").on("click",function(){        ...

随机推荐

  1. NoSuchMethodError

    http://www.tuicool.com/articles/iIVbuuZ 有些服务器是指定某个目录下的所有jar包,这样如果同时存在不同版本的jar包,也会引起这个问题,算一个检查点

  2. cache缓存帮助类

    public class CacheHelper { /// <summary> /// 创建缓存项的文件 /// </summary> /// <param name= ...

  3. ”未在本地计算机上注册“microsoft.et.OLEDB.4.0”提供程序。“解决方案大集合

    本人在做一个连接Access数据库的时候,程序扔给我一个如此Bug——“未在本地计算机上注册“microsoft.et.OLEDB.4.0”, 请教度娘,告诉我可能是如下因素: 一.“设置应用程序池默 ...

  4. React(JSX语法)----动态UI

    1.React honws how to bubble and capture events according to the spec,and events passed to your event ...

  5. Here's to the crazy ones.

    Here's to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square h ...

  6. 补交作业——Beta发布评论

    1.飞天小女警: 礼物挑选这一项目是很好的点子,比较能够吸引客户,更加方便快捷的挑选也满足现代人在送礼物方面的需求.这一次的发布界面效果好了很多,并且成功的发布到了云服务器上. 2.nice! : 这 ...

  7. UVA 10474

    题意:给你一组数,再给几个数问是否在一组数中. 题很简单:STL入门. 没用到STL. #include<iostream> #include<cstdio> #include ...

  8. RecyclerView使用

    步骤: 1:首先导入V7依赖包 2:在布局中引用RecyclerView 3:在activity中查找控件 4:继承RecyclerView.Adapter,实现它的3个方法, (1):加载布局的on ...

  9. XMLHttpRequest

    XMLHttpRequest对象的方法 abort() 取消当前所发出的请求 getAllResponseHeaders() 取得所有的HTTP头信息 getResponseHeader() 取得一个 ...

  10. Hyper-V端口映射

    有时候我们为了让局域网或外网用户直接远程访问或访问虚拟机里的服务,可以将实机端口直接映射到Hyper-V的虚拟机里面,省去很多麻烦. 下面是hyper-v共享IP端口映射一些常用命令共享IP端口映射一 ...