解决移动端click点击问题
下载地址:https://github.com/ftlabs/fastclick
1,为什么移动端点击会有300ms的延迟呢?
从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间。这是因为浏览器想看看你是不是要进行双击(double tap)操作。
2,兼容性
- iOS 3及更高版本的移动Safari
- iOS 5及更高版本的Chrome
- Android上的Chrome(ICS)
- Opera Mobile 11.5及以上版本
- Android 2以来的Android浏览器
- PlayBook OS 1及以上版本
3,如何使用
<script type='application/javascript' src='/path/to/fastclick.js'></script>
调用方法:
a,原生js
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
b,jquery
$(function() {
FastClick.attach(document.body);
});
c,common js方法
var attachFastClick = require('fastclick');
attachFastClick(document.body);
d,AMD
var FastClick = require('fastclick');
FastClick.attach(document.body, options);
解决移动端click点击问题的更多相关文章
- CSS3解决移动端手指点击或滑动屏幕时出现的浅蓝色背景框
当时做完移动端页面发现点击图片(背景图按钮),出现了浅蓝色背景,实属影响页面美观,解决这一问题代码如下 html,body{ -webkit-tap-highlight-color: rgba(0,0 ...
- 解决移动端click事件300ms延迟的问题
方法1.部分浏览器的<meta>标签加上width=device-width就能解决. 方法2.引入fastclick.js库 <!DOCTYPE html> <html ...
- JS 插件 fastclick.js 解决手机端click点击延迟
FastClick 是一个简单,易于使用的JS库用于消除在移动浏览器上触发click事件与一个物理Tap(敲击)之间的300延迟. 对于非移动浏览器不启作用,禁用缩放标签. <meta name ...
- 【技术博客】移动端的点击事件与Sticky Hover问题
目录 移动端的点击事件与Sticky Hover问题 TL;DR 前言 问题描述 背景 实现方式 问题 关于移动端浏览器的点击事件 初次发现问题后各种解决尝试:从点击事件本身下手 cursor: po ...
- 移动端click时间延迟300
解决移动端click延迟事件方法,,引入fastclick.js 然后在script标签里面写上FastClick.attach(document.body); <!DOCTYPE html& ...
- 移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
- 移动端click事件延迟300ms到底是怎么回事,该如何解决?
不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...
- 移动端click事件延迟300ms的原因以及解决办法[转载]
原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...
- fastclick.js解决移动端(ipad)点击事件反应慢问题
参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 ...
随机推荐
- Java源码ExtJS 5 SpringMVC 4Hibernate 4通用后台管理开发框架
需要源码,请加QQ:858-048-581 一.特色1.采用Spring MVC的静态加载缓存功能,在首页将Javascript文件.CSS文件和图片等静态资源文件加载进来放进内存,极大提高ExtJS ...
- 第34篇 再谈http协议
从打开一个网址说起 当在浏览器中输入一个网址的时候,浏览器会渲染出对应的网页的内容.作为web开发人员来说,应该知道这个过程: 当输入的一个网址为域名的时候,浏览器则根据本机的网关和DNS服务器来解析 ...
- Java设计模式之《组合模式》及应用场景
摘要: 原创作品,可以转载,但是请标注出处地址http://www.cnblogs.com/V1haoge/p/6489827.html 组合模式,就是在一个对象中包含其他对象,这些被包含的对象可能是 ...
- LSTM模型与前向反向传播算法
在循环神经网络(RNN)模型与前向反向传播算法中,我们总结了对RNN模型做了总结.由于RNN也有梯度消失的问题,因此很难处理长序列的数据,大牛们对RNN做了改进,得到了RNN的特例LSTM(Long ...
- 出现java.lang.reflect.UndeclaredThrowableException异常
解决方案:1.看导进来的项目是否有中文路径.2.看是否有get.set方法没写.3.和部署的环境有关.比如,是否写了构造函数.EJB需要.
- 剑指offer_(4)
重建二叉树: 题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字. 例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍 ...
- dreamweaver中的 map怎么调用?_制作热点图像区域
我们浏览网页时,经常看到一些图片上会出现特别的超链接,即在一张图片上有多个局部区域和不同的网页链接,比如地图链接. 这就是映射图像(Image Map),它是指一幅根据链接对象不同而被人为划分为若干指 ...
- java中 "==" 和 ".equels"的区别
起初接触java的时候这个问题还是比较迷茫的,最近上班之余刷博客的时候看了一些大神写的文章,自己也来总结一下,直接贴代码: package string; public class demo1 { p ...
- Java标准注释配置
eclipse中java文件头注释格式设置 windows->preferences->java->Code Templates->comments->Type-> ...
- 使文字在div中水平和垂直居中的的css样式为,四个边分别设置阴影样式
text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...