解决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"> ...
随机推荐
- 『jQuery』.html(),.text()和.val()的使用
『jQuery』.html(),.text()和.val()的使用 2013-04-21 10:25 by 我是文东, 8335 阅读, 0 评论, 收藏, 编辑 本节内容主要介绍的是如何使用jQue ...
- 使用JPA保存对象时报nested exception is javax.persistence.RollbackException: Transaction marked as rollbackOnly错误
使用JPA保存对象时报nested exception is javax.persistence.RollbackException: Transaction marked as rollbackOn ...
- [GO]小技巧,如何实现一个链式操作
package main import "fmt" type Stu struct { Name string Age int } func (p *Stu) SetName(na ...
- jar 包和 mysql 服务器部署
(1)创建好本地服务器: navicat新建链接: 链接名:自定义,这里命名为test 配置同jar包 (2)给予登陆权限,loclhost_3306,右击选择“命令行界面”,输入如下: create ...
- GetDocument missing storage-class or type specifiers的解决方法
error C2143: syntax error : missing ';' before '*'error C2501: 'CTest1Doc' : missing storage-class o ...
- ArcGIS Desktop Python add-ins 插件类型
Python可以在ArcGIS 桌面程序中创建如下的插件类型: 插件类型 描述 按钮(button) 是一个简单功能定制形式,可以在点击情况下执行一些业务逻辑.它会执行一个或一系列的动作.按钮可以放在 ...
- Redis Quick Start [遇到问题解决问题版]
http://redis.io/topics/quickstart make test 时的问题: 问题:gcc: Command not found 解决:yum install gcc [root ...
- 20145234黄斐《java程序设计》第六周
教材学习内容总结 第十章:输入与输出 InputStream与OutputStream 流(Stream)是对「输入输出」的抽象,注意「输入输出」是相对程序而言的 InputStream与Output ...
- 用idea简单创建web项目——两种方式
最近同学让我教她们用idea创建web项目,于是我用两种方式创建web项目,并整理截图给她们看,一种是用maven创建,一种是不用maven创建,适合菜鸟哈哈~ 方法一:不用maven 1.解压tom ...
- Spring的@ModelAttribute注解
1. 一.绑定请求参数到指定对象 public String test1(@ModelAttribute("user") UserModel user) 只是此处多了一个注解@Mo ...