解决移动端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 问题的发现 ...
随机推荐
- VUE2.0实现购物车和地址选配功能学习第七节
第七节 卡片选中,设置默认 1.卡片选中html:<li v-for="(item,index) in filterAddress" v-bind:class="{ ...
- Ansible 系列之 Playbooks 剧本 (1)
一.Playbooks 介绍 1.Playbooks是Ansible的配置,部署和编排语言.它们可以描述您希望远程系统执行的策略,或一般IT流程中的一组步骤. 如果说ansible 模块 是你车间里的 ...
- 用ASP.NET创建网站
ASP.NET提供三种框架来创建web应用:WebForms,ASP.NET MVC和ASP.NET WebPages.这三种框架都是稳定成熟的,你可以用任何一种方式开发一个很棒的web应用.不管你选 ...
- JQuery实现Ajax跨域访问--Jsonp原理
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...
- Visual Studio 2015创建ASP.NET5项目“DNX SDK version 'dnx-clr-win-x86.1.0.0-beta5' 无法安装的错误
使用asp.net5建立web application时遇到DNX SDK版本 “dnx-clr-win-x86.1.0.0-beta5”无法安装的错误 解决办法: 运行cmd: 1.输入: @pow ...
- CCF 201609-4 交通规划
问题描述 试题编号: 201609-4 试题名称: 交通规划 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 G国国王来中国参观后,被中国的高速铁路深深的震撼,决定为自己的国家 ...
- 享受release版本发布的好处的同时也应该警惕release可能给你引入一些莫名其妙的大bug
一般我们发布项目的时候通常都会采用release版本,因为release会在jit层面对我们的il代码进行了优化,比如在迭代和内存操作的性能提升方面,废话不多说, 我先用一个简单的“冒泡排序”体验下r ...
- Codeforces Gym 100269E Energy Tycoon 贪心
题目链接:http://codeforces.com/gym/100269/attachments 题意: 有长度为n个格子,你有两种操作,1是放一个长度为1的东西上去,2是放一个长度为2的东西上去 ...
- (30)批处理文件.bat
批处理文件(bat) 简单的说,批处理的作用就是自动的连续执行多条命令 .编写bat处理文件可以使用记事本的方式: 常见批处理文件的命令: echo 表示显示此命令后的字符 tiltle 设置窗口的标 ...
- [UWP]了解模板化控件(2):模仿ContentControl
ContentControl是最简单的TemplatedControl,而且它在UWP出场频率很高.ContentControl和Panel是VisualTree的基础,可以说几乎所有VisualTr ...