下载地址: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. canvas画时钟,重拾乐趣!

    canvas时钟--效果图 一.先来简单介绍画时钟需要的canvas知识 1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用. HTML代码: <ca ...

  2. maven 项目发布时,无法引用 修改的domain 问题

    其实是在bo 的smart-score 里面引用了这个interface    所以还要把 smart -Score 重新发布一下.让这个smart 引用 新的 Player-service  中的i ...

  3. WCF小试

    1.创建WCF 右键解决方案-新建项目-WCF服务应用程序. 创建后会生成一些文件,其中IService.cs是服务的接口,只有在接口中定义的方法才能被外部调用,Service.svc是我们的服务名称 ...

  4. netflix zuul-simple-webapp.war在tomcat下启动

    按照netflix 在github 的wiki的文档使用 gradlew jettyRun 可以启动jetty来进行测试. 在本地build war 以后,我放在tomcat 运行的时候,却不可以运行 ...

  5. H5 内联 SVG

    HTML5 内联 SVG HTML5 画布 HTML5 画布 vs SVG HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics ...

  6. Android 事件统计

    title: Android 事件统计 1.写在前面的话 最近都在看framework的东西,也几天没有写什么东西,今天有点时间写下上次面试遇到的一个问题.问题大概是这样的,如果我需要统计页面的点击事 ...

  7. php+apache+mysql的安装

    1.LAMP的安装顺序问题,现在是默认安装好了Linux系统,我的版本是Ubuntu 12.04.一般来说比较建议的顺序是Mysql Apache 最后安装PHP,在我实践下来 Apache和Mysq ...

  8. onchange、onclick、onblur等事件区别

    onblur:控件在失去焦点的时候触发 OnChange:当控件的内容发生改变时触发该事件 OnClick:点击该控件时触发 OnKeyDown:在控件有焦点的情况下,按下键时发生 OnKeyUp:在 ...

  9. HBuilder的webview操作

    HBuilder的webview操作 webviewAPI文档:http://www.html5plus.org/doc/zh_cn/webview.html 创建新的webview窗口: Webvi ...

  10. 求一个int型整数的两种递减数之和(java)--2015华为机试题

    题目描述: 给出一个整数(负数使用其绝对值),输出这个整数中的两种递减数(1.最大递减数:2.递减数中各位数之和最大的数)之和. 递减数:一个数字的递减数是指相邻的数位从大到小排列的数字,不包含相邻的 ...