解决onclick事件的300ms延时问题
首先是资源的下载:fastclick.js
作为一个新手,插件原理什么的研究不透,看的也是似懂非懂的,网上有很多大牛写的博文相当的好,对于写文章方面确实是望尘莫及啊,所以想详细了解原理的朋友直接去大牛的博客里欣赏吧【读fastclick源码有感】
在这里我只是简单的记录下简单的用法,还请大牛们不吝赐教
为什么存在延迟?
从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作。
引入插件步骤
①在HTML页面中添加
- <script type='application/javascript' src='/path/to/fastclick.js'></script>
注:必须在页面所有Element之前加载脚本文件先实例化fastclick
②在JS中添加fastclick的身体,推荐以下做法:
- if ('addEventListener' in document) {
- document.addEventListener('DOMContentLoaded', function() {
- FastClick.attach(document.body);
- }, false);
- }
如果你使用了JQuery,那么JS引入就可以改用下面的写法:
- $(function() {
- FastClick.attach(document.body);
- });
如果你使用Browserify或者其他CommonJS-style 系统,当你调用`require('fastclick')`时,`FastClick.attach`事件会被返回,加载FastClick最简单的方式就是下面的方法了:
- var attachFastClick = require('fastclick');
- attachFastClick(document.body);
解决onclick事件的300ms延时问题的更多相关文章
- 移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
- 移动端click事件延迟300ms到底是怎么回事,该如何解决?
不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...
- 移动端click事件延迟300ms的原因以及解决办法[转载]
原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...
- 解决iscroll5在手机页面上onclick事件失效
Iscroll.js使用之后页面上面A标签的onclick事件无效了 解决办法 实例化IScroll的时候把preventDefault设为false,默认为true var myScroll; ...
- javascript 的button onclick事件不起作用的解决方法
在项目中遇到个问题:servlet向前端返回如下按钮,当course_ID为数字是onclick事件正常,但当course_ID含有字母时onclick事件就不起作用.网上找了很多方法都不管用,最后自 ...
- 动态生成的DOM不会触发onclick事件的原因及解决方法
最近朋友在做一个项目的时候,遇到动态加载微博内容,然后点击“展开评论”后获取该微博的所有评论.这里使用了动态加载的<span mid='123456789′ class='get_comment ...
- 前端的事件冒泡(例如点击一次onclick事件执行两次)解决办法
问题概要: 当我运用antd 中 radio组件的时候发现radio组件是有bug的 就是你不能给他赋予id 和 value,同时也绑定不上onclick等事件.举个例子: 可以看到 你就算赋予了id ...
- 【转】ASP.NET的OnClientClick与OnClick事件【解决了“识别用户在对话框里面选yes或no的问题”】
OnClientClick是客户端事件方法.一般采用JavaScript来进行处理.也就是直接在IE端运行.一点击就运行. OnClick事件是服务器端事件处理方法,在服务器端,也就是IIS中运行.点 ...
- 解决IE6下a标签的onclick事件里的超链接不跳转问题
今天遇到个很诡异的问题,就是<a href="javascript:void(0);" onclick="window.location=url"> ...
随机推荐
- 2018.07.03 BZOJ 1007: [HNOI2008]水平可见直线(简单计算几何)
1007: [HNOI2008]水平可见直线 Time Limit: 1 Sec Memory Limit: 162 MB Description 在xoy直角坐标平面上有n条直线L1,L2,-Ln, ...
- java 解析txt/html文件
package util.read; import java.io.BufferedReader;import java.io.FileReader; public class ReadFromFil ...
- MFC框架仿真<三>R T T I
RTTI,简单的说,就是判定A类是否为B类的基类.将书本的内容最大程度的简化,如下图的类层次,现在解决的问题就是:判定“梨”是否是“红富士”的基类.
- spring boot打包后windows启动乱码
事情的起因什么的就不多表了,直接进入主题... 项目都要上线了,结果发现使用 idea mvn install之后的 jar在windows下启动乱码,而使用idea启动却没有问题!!! 这是神马情况 ...
- 《SLAM for Dummies》中文版《SLAM初学者教程》
SLAM for Dummies SLAM初学者教程A Tutorial Approach to Simultaneous Localization and Mapping 一本关于实时定位及绘图 ...
- 计算服务器的pv量算法
如何计算服务器能够承受多大的pv? 你想建设一个能承受500万PV/每天的网站吗? 500万PV是什么概念?服务器每秒要处理多少个请求才能应对?如果计算呢? PV是什么: PV是page view ...
- 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 ...
- 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 ...
- 西邮Linux兴趣小组2014级免试挑战题
原文链接:西邮Linux兴趣小组2014级免试挑战题 又到了小组纳新的季节^_^,时间过的真快! 想起去年这会儿自己做免试题的时候根本找不着北@_@ 有幸今年能够在这里和大家分享免试挑战题,也正如我 ...
- 相聚 桂林电子科技大学第三届ACM程序设计竞赛
题目链接:https://ac.nowcoder.com/acm/contest/558/D 就是求有多少块区域,用DFS就可以解决,一遇到一个1就从其开始深搜,将其所在的区域块覆灭(变为0),再遇到 ...