从点击屏幕上的元素到触发元素的 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. 使用第三方框架vapor和swift 搭建本地服务器

    在网上看到一篇教程,使用vapor搭建服务端,自己记录下来备忘本文主要记录以下几点 1.配置好Vapor 2.用Swift写GET,POST方法,返回JSON数据 3.配置本地服务器,编译运行在浏览器 ...

  2. Perl的基本语法(转)

    (原文来自:http://www.jb51.net/shouce/perl.htm)

  3. 【OPENGL】第三篇 着色器基础(一)

    在这一章,我们会学习什么是着色器(Shader),什么是着色器语言(OpenGL Shading Language-GLSL),以及着色器怎么和OpenGL程序交互. 首先我们先来看看什么叫着色器. ...

  4. 【OpenGL】 第一篇 OpenGL概览

    ---------------------------------------------------------------------------------------------------- ...

  5. Apache Commons 系列简介 之 Pool

    一.概述 Apache Commons Pool库提供了一整套用于实现对象池化的API,以及若干种各具特色的对象池实现.2.0版本,并非是对1.x的简单升级,而是一个完全重写的对象池的实现,显著的提升 ...

  6. (转) Playing FPS games with deep reinforcement learning

    Playing FPS games with deep reinforcement learning 博文转自:https://blog.acolyer.org/2016/11/23/playing- ...

  7. 关于电信cdma基站nid,sid,bid的解释

    通过cdma的基站代码确定该基站的经纬度位置,必须知道Sid.Nid.Bid这三个基站数据,缺一不可. SID 是系统识别码,每个地级市只有一个sid,是唯一的. NID是网络识别码,由各本地网管理, ...

  8. intelliJ idea debug模式下启动慢的原因

    今天在idea上以debug方式启动项目的时候,特别慢,启动半天启动不起来,一直以为是数据库连接的原因,但重启mysql服务后也不好使,特别郁闷... 最后发现原来是之前调试的时候加的断点还在,导致启 ...

  9. VS中Debug和Realease、及静态库和动态库的区别整理(转)

    原文出自:http://www.cnblogs.com/chensu/p/5632486.html 一.Debug和Realease区别产生的原因 Debug 通常称为调试版本,它包含调试信息,并且不 ...

  10. sp_who_lock

    USE MyDataBase GO /****** Object: StoredProcedure [dbo].[sp_who_lock] Script Date: 4/10/2015 ******/ ...