下载地址: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. php封装+租房子练习题

    第一个页面DBDA.class.php <?php class DBDA { public $host = "localhost"; public $uid = " ...

  2. c3p0获取连接Connection后的Close()---释疑

    论题: java c3p0获取连接Connnection 之后, 调用 con.close( ) 是否真的关闭了物理连接 ? 简答: c3p0采用连接池, 目的就是提前预置一定数量的连接, 在使用时候 ...

  3. Java基础之路(一)下--引用数据类型之数组

    上次我们说了java的基础数据类型,今天我们就来说一下引用数据类型中的数组. 什么是数组 数组:存储在一个连续的内存块中的相同数据类型(引用数据类型)的元素集合. 数组中的每一个数据称之为数组元素,数 ...

  4. 解决VS2015 VBCSCompiler.exe 占用CPU100%的问题

    使用VS2015重复编译运行会发现系统运行缓慢甚至卡死,打开windows任务管理器可以发现CPU已经飙到了100%, VBCSCompiler.exe进程出现多个实例并且占用了大量CPU. 解决方案 ...

  5. PHP文本的读写

    <?php $txtPart="test0.txt"; //export $txtPartContent=fopen($txtPart,"r"); //读 ...

  6. 每天一个Linux命令 1

    nl命令在Linux系统中用来计算文件中行号.nl可以将输出的文件内容自动的加上行号!其默认的结果与cat -n有点不太一样,nl可以将行号做比较多的显示设计,包括位数与是否自动补齐0等等的功能. 1 ...

  7. Mysql 保留最新的10条数据

    Mysql每天执行计划,保留最新的10条数据,其余的删除 1.Mysql 保留最新的10条数据 sql语句: DELETE tb FROM tbname AS tb,( SELECT id FROM ...

  8. 将两个列不同的DataTable合并成一个新的DataTable

    /// <summary>         /// 将两个列不同(结构不同)的DataTable合并成一个新的DataTable         /// </summary> ...

  9. restful restAPI 的定义方式

    今天听了一些rest 的讲解,感谢玖遥老大教导,晚上把整理出来,帮助那些和我一样有过迷茫的人! 我举的例子是经过我的老大讲解,以及观看阮一峰的restful架构的一些整合,和自己的拙劣见解. 首先:每 ...

  10. PDCA循环原理

    1.PDCA循环原理:plan  do  check action 以pdca质量环模型为质量控制和保证的理论依据,对软件质量进行把控. plan计划阶段:项目质量规划 1.分析现状,找出质量问题 2 ...