从点击屏幕上的元素到触发元素的 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. android 保存文件的各种目录列表

    一般的,我们可以通过context和Environment来获取要保存文件的目录 ($rootDir) +- /data -> Environment.getDataDirectory() | ...

  2. 使用java连接sqlserver2008 R2/sqlserver2008

    package com.product.jdbc.dbutil; import java.sql.Connection;import java.sql.DriverManager;import jav ...

  3. java异常知识点整理

    异常处理机制:捕获异常(try-catch-finally)和声明抛弃异常(throw); 所有的异常类都直接或者间接地继承于Throwable类: java异常分为可查异常和不可查异常两种.可查异常 ...

  4. ES6笔记一

    遍历数组: 1:传统的 for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]);} ...

  5. python未知网卡名情况下获取本机IP

    import socket def get_ip(): s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM) try: # doesn't even ...

  6. JS 中通过对象关联实现『继承』

    JS 中继承其实是种委托,而不是传统面向对象中的复制父类到子类,只是通过原型链将要做的事委托给父类. 下面介绍通过对象关联来实现『继承』的方法: Foo = { // 需要提供一个 init 方法来初 ...

  7. Linux任务计划

    Linux任务计划: 一次性任务执行(at.batch): at:定时任务,指定一个时间执行一个任务,只能执行一次. at使用方式: 交互式:让用户在at>提示符输入多个要执行的命令: 批处理: ...

  8. HDU 5937 Equation

    题意: 有1~9数字各有a1, a2, -, a9个, 有无穷多的+和=. 问只用这些数字, 最多能组成多少个不同的等式x+y=z, 其中x,y,z∈[1,9]. 等式中只要有一个数字不一样 就是不一 ...

  9. Openstack入坑指南

    什么是云计算 概念 云计算是一种基于互联网的计算方式,通过这种方式,共享的软硬件资源和信息,可以按需求提供给计算机和其他设备.用户不需要了解”云“中的基础设施细节,不必具有相应的专业知识,也无需直接控 ...

  10. (转)Image Segmentation with Tensorflow using CNNs and Conditional Random Fields

    Daniil's blog Machine Learning and Computer Vision artisan. About/ Blog/ Image Segmentation with Ten ...