下载地址:https://github.com/ftlabs/fastclick

1,为什么移动端点击会有300ms的延迟呢?

从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间。这是因为浏览器想看看你是不是要进行双击(double tap)操作。

2,兼容性

  • iOS 3及更高版本的移动Safari
  • iOS 5及更高版本的Chrome
  • Android上的Chrome(ICS)
  • Opera Mobile 11.5及以上版本
  • Android 2以来的Android浏览器
  • PlayBook OS 1及以上版本

3,如何使用

<script type='application/javascript' src='/path/to/fastclick.js'></script>

调用方法:

a,原生js

if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}

b,jquery

$(function() {
FastClick.attach(document.body);
});

c,common js方法

var attachFastClick = require('fastclick');
attachFastClick(document.body);

d,AMD

var FastClick = require('fastclick');
FastClick.attach(document.body, options);

解决移动端click点击问题的更多相关文章

  1. CSS3解决移动端手指点击或滑动屏幕时出现的浅蓝色背景框

    当时做完移动端页面发现点击图片(背景图按钮),出现了浅蓝色背景,实属影响页面美观,解决这一问题代码如下 html,body{ -webkit-tap-highlight-color: rgba(0,0 ...

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

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

  3. JS 插件 fastclick.js 解决手机端click点击延迟

    FastClick 是一个简单,易于使用的JS库用于消除在移动浏览器上触发click事件与一个物理Tap(敲击)之间的300延迟. 对于非移动浏览器不启作用,禁用缩放标签. <meta name ...

  4. 【技术博客】移动端的点击事件与Sticky Hover问题

    目录 移动端的点击事件与Sticky Hover问题 TL;DR 前言 问题描述 背景 实现方式 问题 关于移动端浏览器的点击事件 初次发现问题后各种解决尝试:从点击事件本身下手 cursor: po ...

  5. 移动端click时间延迟300

    解决移动端click延迟事件方法,,引入fastclick.js  然后在script标签里面写上FastClick.attach(document.body); <!DOCTYPE html& ...

  6. 移动端click事件延迟300ms的原因以及解决办法

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...

  7. 移动端click事件延迟300ms到底是怎么回事,该如何解决?

    不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...

  8. 移动端click事件延迟300ms的原因以及解决办法[转载]

    原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...

  9. fastclick.js解决移动端(ipad)点击事件反应慢问题

    参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 ...

随机推荐

  1. Xcode的中常用到的快捷键,印象笔记中常用到的快捷键

    Xcode提供了很多快捷键,灵活使用快捷键可以提升开发效率.但对于初学者来说,一次性的去记住并掌握如此多的快捷键显然是不现实的,本文就是来帮助大家了解在iOS开发过程中,使用最频繁的一些快捷键. 1. ...

  2. WPF移动Window窗体(鼠标点击左键移动窗体自定义行为)

    XAML代码部分:1.引用System.Windows.Interactivity 2.为指定的控件添加一个拖动的行为 3.很简单的了解行为的作用和用法 <Window xmlns=" ...

  3. 关于input只能输入数字的两种小方法

    第一种: 直接给input标签 name赋值如下 <input name="start_price" id="start_price" type=&quo ...

  4. 本人开发的JavaWeb急速框架Blast上线了

    JAVA 急速WEB框架Blast --对JavaWeb的学习性框架,参考了spring的实现 --阅读Blast源码可以快速掌握JavaWeb常用技术和方法论,并付诸实践 Blast 是基于 Jav ...

  5. ThinkPHP框架知识的注意点

    ThinkPHP框架 访问入口文件后在application文件夹中会出现一些文件夹,其中的home文件夹是前端模块,也可以在application文件夹中新建文件夹.home文件夹模块中Conf文件 ...

  6. click和onclick本质的区别

    原生javascript的click在w3c里边的阐述是DOM button对象,也是html DOM click() 方法,可模拟在按钮上的一次鼠标单击. button 对象代表 HTML 文档中的 ...

  7. ZooKeeper的简单理解

    1 ZooKeeper的一致性特点 概念 描述 备注 顺序一致性 以ZXID来保证事务的顺序性 原子性 以ZAB保证原子操作,要么成功,要么失败 单一视图 无论客户端从哪个服务器获取到关于应用的数据都 ...

  8. Windows7 java-jdk1.7安装及设置变量过程

    jdk安装的次数较少,容易忘记,这里专门记录一下. 1:jdk1.7网上到处都是可以随便下载一个.然后进行安装,不过在安装过程中把安装路径单独记忆一下,在配置变量的时候会用到. 2:安装完JDK后配置 ...

  9. Onsen UI 前端框架(二)

    上一章介绍了OnsenUI一些入门的知识以及它和AngularJS配合的初始化方法.这一章,咱们继续对这块内容进行介绍,对OnsenUI提供的组件进行更进一步的学习. 咱们从手机应用布局的最上面开始. ...

  10. Node.js开发工具、开发包、框架等总结

    开发工具 1.WebStorm,毫无疑问非他莫属,跨平台,强大的代码提示,支持Nodejs调试,此外还支持vi编辑模式,这点我很喜欢.2.做些小型项目用Sublime Text.3.Browserif ...