首先是资源的下载:fastclick.js

作为一个新手,插件原理什么的研究不透,看的也是似懂非懂的,网上有很多大牛写的博文相当的好,对于写文章方面确实是望尘莫及啊,所以想详细了解原理的朋友直接去大牛的博客里欣赏吧【读fastclick源码有感】

在这里我只是简单的记录下简单的用法,还请大牛们不吝赐教

为什么存在延迟?

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

     引入插件步骤

①在HTML页面中添加

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

注:必须在页面所有Element之前加载脚本文件先实例化fastclick
  ②在JS中添加fastclick的身体,推荐以下做法:

  1. if ('addEventListener' in document) {
  2. document.addEventListener('DOMContentLoaded', function() {
  3. FastClick.attach(document.body);
  4. }, false);
  5. }

如果你使用了JQuery,那么JS引入就可以改用下面的写法:

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

如果你使用Browserify或者其他CommonJS-style 系统,当你调用`require('fastclick')`时,`FastClick.attach`事件会被返回,加载FastClick最简单的方式就是下面的方法了:

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

解决onclick事件的300ms延时问题的更多相关文章

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

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

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

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

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

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

  4. 解决iscroll5在手机页面上onclick事件失效

    Iscroll.js使用之后页面上面A标签的onclick事件无效了   解决办法 实例化IScroll的时候把preventDefault设为false,默认为true var myScroll; ...

  5. javascript 的button onclick事件不起作用的解决方法

    在项目中遇到个问题:servlet向前端返回如下按钮,当course_ID为数字是onclick事件正常,但当course_ID含有字母时onclick事件就不起作用.网上找了很多方法都不管用,最后自 ...

  6. 动态生成的DOM不会触发onclick事件的原因及解决方法

    最近朋友在做一个项目的时候,遇到动态加载微博内容,然后点击“展开评论”后获取该微博的所有评论.这里使用了动态加载的<span mid='123456789′ class='get_comment ...

  7. 前端的事件冒泡(例如点击一次onclick事件执行两次)解决办法

    问题概要: 当我运用antd 中 radio组件的时候发现radio组件是有bug的 就是你不能给他赋予id 和 value,同时也绑定不上onclick等事件.举个例子: 可以看到 你就算赋予了id ...

  8. 【转】ASP.NET的OnClientClick与OnClick事件【解决了“识别用户在对话框里面选yes或no的问题”】

    OnClientClick是客户端事件方法.一般采用JavaScript来进行处理.也就是直接在IE端运行.一点击就运行. OnClick事件是服务器端事件处理方法,在服务器端,也就是IIS中运行.点 ...

  9. 解决IE6下a标签的onclick事件里的超链接不跳转问题

    今天遇到个很诡异的问题,就是<a href="javascript:void(0);" onclick="window.location=url"> ...

随机推荐

  1. DataStage 九、数据交换到MySQL以及乱码问题

    DataStage序列文章 DataStage 一.安装 DataStage 二.InfoSphere Information Server进程的启动和停止 DataStage 三.配置ODBC Da ...

  2. Devexpress VCL Build v2014 vol 14.2.5 发布

    和xe8 几乎同一天出来,但是目前官方不支持xe8. The following sections list all minor and major changes in DevExpress VCL ...

  3. 2018.08.20 bzoj1143: [CTSC2008]祭祀river(最长反链)

    传送门 一道简单的求最长反链. 反链简单来说就是一个点集,里面任选两个点u,v都保证从u出发到不了v且v出发到不了u. 链简单来说就是一个点集,里面任选两个点u,v都保证从u出发可以到达v或者v出发可 ...

  4. js函数预编译

    function fn(a){ console.log(a); var a = 123; function a(){} console.log(a); var b = function(){} con ...

  5. SpringMVC零碎笔记

    在web.xml里可以配置webapp的默认首页,格式如下: <welcome-file-list> <welcome-file>index.html</welcome- ...

  6. 201709019工作日记--Java中的各种锁--未解决

    1. Syncronized与ReentrantLock Synchronized比ReentrantLock进java标准早,因此一开始大家都是用它.相当于Java提供了一种封装的互斥锁机制,对于用 ...

  7. NSUserDefaults 简介,使用 NSUserDefaults 存储自定义对象 - lady-奕奕的个人空间 - 开源中国社区

    一.了解NSUserDefaults以及它可以直接存储的类型 NSUserDefaults是一个,在整个程序中只有一个实例对象,他可以用于数据的永久保存,而且简单实用,这是它可以让数据自由传递的一个前 ...

  8. 反编译 轻松调频 Android APP 下载“飞鱼秀”录音

    经常听“飞鱼秀”,但是由于时间的原因,只能听回放,但是轻松调频的APP做的有点儿... 听回放的时候经常会中断,还不能拖动进度条,就决定把录音下载下来听. 1.反编译apk(Android反编译过程见 ...

  9. Hdu1548 A strange lift 2017-01-17 10:34 35人阅读 评论(0) 收藏

    A strange lift Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Tota ...

  10. SPFA穿越虫洞——负权回路得判断

    poj3259 题目大意:穿越虫洞可以回到过去(时间--)所以能不能让时间倒流呢,就是判断有没有负权回路这次尝试用SPFA算法,也可以复习一下链式前向星 准备工作,队列q,spfa算法得有点就在于这个 ...