解决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"> ...
随机推荐
- Unicode、UTF-8 和 ISO8859-1
Unicode.UTF-8 和 ISO8859-1到底有什么区别 1.本文主要包括以下几个方面:编码基本知识,java,系统软件,url,工具软件等. 在下面的描述中,将以"中文" ...
- 前端之JavaScript笔记2
一 数组对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 2018.08.28 codeforces600E(dsu on tree)
传送门 一道烂大街的dsu on tree板题. 感觉挺有趣的^_^ 代码真心简单啊! 就是先处理轻儿子,然后处理重儿子,其中处理轻儿子后需要手动消除影响. 代码: #include<bits/ ...
- simpson法计算arctan(1)-即pi/4
对1/(1+x^2) 进行0到1的积分即使pi/4; 采用simpson方法 Func<double,double> func=(x)=>{ return 1/(1+ Math.Po ...
- mysql报错排查总结
mysql报错: [root@zabbix ~]# mysql ERROR 2002 (HY000): Can't connect to local MySQL server through sock ...
- Deployment is out of date due to changes in the underlying project contents. Deployment is out of date due to changes in the underlying project contents. You'll need to manually 'Redeploy' the projec
原因1:导入的jar包路径不对,造成第一个错误, 原因2:设置右键工程->属性->myeclipse->web->deployment选use workbenk defaul ...
- 对call() apply() 方法的简单理解
真的是非常简单的理解,我知道的并不多,在网上查找了很多的资料,还是只能了解一点皮毛,下面来整理出来,方便以后深入的去学习,也是对目前知道的知识点的巩固. 整理一些网上的经典解答: 1.一句话区分cal ...
- java中的类、对象、方法
类=一个种类(class)东西 对象=属于该种类的一个对象/物件(object,台湾翻译为‘物件’)方法=对这个种类的东西都可以进行的操作 比如我有一辆汽车-类 public class car {. ...
- POJ2653判断线段相交
POJ2653 题目大意:按顺序放木棒,问最后所有的木棒中上面没有木棒的木棒的索引是…… 思路:按理说线段相交的题目做的听多了,这个应该不算新鲜,但是这个题,还是让我学到了认真读题,面对这个题很容易想 ...
- Paul and Joyce are going to a movie(More listening of Unit 2)
Paul: Hurry up, Joyce. We need to leave now if we're going to get to the theater a half hour befor ...