首先是资源的下载: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. 2018.07.03 BZOJ 1007: [HNOI2008]水平可见直线(简单计算几何)

    1007: [HNOI2008]水平可见直线 Time Limit: 1 Sec Memory Limit: 162 MB Description 在xoy直角坐标平面上有n条直线L1,L2,-Ln, ...

  2. java 解析txt/html文件

    package util.read; import java.io.BufferedReader;import java.io.FileReader; public class ReadFromFil ...

  3. MFC框架仿真<三>R T T I

    RTTI,简单的说,就是判定A类是否为B类的基类.将书本的内容最大程度的简化,如下图的类层次,现在解决的问题就是:判定“梨”是否是“红富士”的基类.

  4. spring boot打包后windows启动乱码

    事情的起因什么的就不多表了,直接进入主题... 项目都要上线了,结果发现使用 idea mvn install之后的 jar在windows下启动乱码,而使用idea启动却没有问题!!! 这是神马情况 ...

  5. 《SLAM for Dummies》中文版《SLAM初学者教程》

    SLAM for Dummies  SLAM初学者教程A Tutorial Approach to Simultaneous Localization and Mapping  一本关于实时定位及绘图 ...

  6. 计算服务器的pv量算法

    如何计算服务器能够承受多大的pv?   你想建设一个能承受500万PV/每天的网站吗? 500万PV是什么概念?服务器每秒要处理多少个请求才能应对?如果计算呢? PV是什么: PV是page view ...

  7. Codeforces 706C Hard problem 2016-09-28 19:47 90人阅读 评论(0) 收藏

    C. Hard problem time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  8. hdu1081 To The Max 2016-09-11 10:06 29人阅读 评论(0) 收藏

    To The Max Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total ...

  9. 西邮Linux兴趣小组2014级免试挑战题

    原文链接:西邮Linux兴趣小组2014级免试挑战题 又到了小组纳新的季节^_^,时间过的真快! 想起去年这会儿自己做免试题的时候根本找不着北@_@  有幸今年能够在这里和大家分享免试挑战题,也正如我 ...

  10. 相聚 桂林电子科技大学第三届ACM程序设计竞赛

    题目链接:https://ac.nowcoder.com/acm/contest/558/D 就是求有多少块区域,用DFS就可以解决,一遇到一个1就从其开始深搜,将其所在的区域块覆灭(变为0),再遇到 ...