解决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"> ...
随机推荐
- Fibonacci number
https://github.com/Premiumlab/Python-for-Algorithms--Data-Structures--and-Interviews/blob/master/Moc ...
- 2018.08.04 洛谷P3380 【模板】二逼平衡树(树套树)
传送门 技不如人,写的权值线段树套线段树在bzoj上无论如何都卡不过空间. 这是一道树套树简单题,感觉没什么好说的. 直接权值线段树套平衡树就行了. 代码: #include<bits/stdc ...
- LA 4670 Dominating Patterns (AC自动机)
题意:给定n个字符串和一个文本串,查找哪个字符串出现的次数的最多. 析:一匹配多,很明显是AC自动机.只需要对原来的进行修改一下,就可以得到这个题的答案, 计算过程中,要更新次数,并且要映射字符串.如 ...
- OSC和GitHub中项目公钥和管理公钥
对于开源托管网站GitHub大家应该不陌生吧,以前一直设置的是github上面的ssh公钥,一直没有发生什么问题,今天在遇到一个问题:git同时把代码push到两个远程仓库.所以就在github和os ...
- (KMP 模板)Number Sequence -- Hdu -- 1711
http://acm.hdu.edu.cn/showproblem.php?pid=1711 Number Sequence Time Limit: 10000/5000 MS (Java/Other ...
- (连通图 模板题)迷宫城堡--hdu--1269
链接: http://acm.hdu.edu.cn/showproblem.php?pid=1269 http://acm.hust.edu.cn/vjudge/contest/view.action ...
- PAT甲 1012. The Best Rank (25) 2016-09-09 23:09 28人阅读 评论(0) 收藏
1012. The Best Rank (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue To eval ...
- windows7,windows8 64位系统 IIS7.0配置.net网站时报错:未能加载文件或程序集“XXX”或它的某一个依赖项。试图加载格式不正确的程序。
背景: 在64位的操作系统中, IIS7.0配置.net网站时报错:未能加载文件或程序集“XXX”或它的某一个依赖项.试图加载格式不正确的程序. 解决办法: 把iis 对应的应用程序池 --高级设置- ...
- 导出delphi编写的ios程序在xcode下的日志
- 使用nexus来搭建Nuget私服
近期在搭建nuget私服.选择nexus这个产品.nexus支持npm,.nuget等,功能比较强大. 前言 博主使用centos7.5来搭建nexus,遇到了不少的问题.最后还是搞定了. 1:下载n ...