从点击屏幕上的元素到触发元素的 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. epoll的LT模式缺点

    本文为原创,转载请注明:http://www.cnblogs.com/gistao/ epoll提供了ET和LT两种模式,网上文章很多,这里只总结下LT模式下的两个缺点 epoll对fd的管理实现是用 ...

  2. Web程序员常见的5个错误及解决方案

    我是那种脾气暴躁的web用户,但我认为正是如此才驱使我成为一名良好的web开发人员.我会对那些会导致使用网站变得困难的事情恼火,我认为事情越简单越方便越好.这里有五个常见的可用性错误,以及如何避免它们 ...

  3. 【转】oracle in和exists、not in和not exists原理和性能探究

    转自http://www.2cto.com/database/201310/251176.html 对于in和exists.not in和not exists还是有很多的人有疑惑,更有甚者禁用not ...

  4. myeclipse10中文注释乱码问题

    将别人的项目或JAVA文件导入到自己的Eclipse中时,常常会出现JAVA文件的中文注释变成乱码的情况,主要原因就是别人的IDE编码格式和自己的Eclipse编码格式不同. 总结网上的建议和自己的体 ...

  5. css中的背景、边框、补丁相关属性

    css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...

  6. System.Linq.Enumerable 中的方法 Aggregate 函数

      语法: public static TSource Aggregate<TSource>( this IEnumerable<TSource> source, Func&l ...

  7. Singly Linked List

    Singly Linked List Singly linked list storage structure:typedef struct Node{ ElemType data; struct N ...

  8. android studio 中 添加.so 文件

    传送门: http://jingyan.baidu.com/article/e3c78d644baaf23c4d85f57d.html 注意在Build.gradle中 添加的位置

  9. 基于日志数据分析以防御CC攻击的想法

    1. What - 什么是CC攻击 CC攻击,即针对应用层HTTP协议的DDos攻击,攻击者在短时间内向目标服务器发送大量的HTTP请求,使得服务器会非常繁忙,资源消耗会增加:同时,如果请求中包含基于 ...

  10. 启用https协议的方法

    提醒:启用https协议会降低服务器性能,如非必要不必启用 一.用openssl生成密钥.证书: 1.生成RSA密钥的方法 openssl genrsa -out privkey.pem 2048 建 ...