js-解决移动端点击事件的延迟问题
众所周知,在手机上的点击事件会有延迟300ms的问题。但在做手机端某些点击小游戏时,我们就需要取消这个延迟的问题;
第一步:禁止页面的缩放
- <meta name="viewport" content="width=device-width user-scalable= 'no'">
这块内容能解决一些部分手机的问题
第二步: fastclick.js
FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之,FastClick 在检测到touchend事件的时候,会通过 DOM 自定义事件立即触发一个模拟click事件,并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。使用方法如下。
1:在页面中引入fastclick.js文件。
2:在js文件中添加以下代码
在 window load 事件之后,在body上调用FastClick.attach()即可。
window.addEventListener(function(){
FastClick.attach( document.body );
},false );
如果使用了jquery插件
$(function() {
FastClick.attach(document.body);
});
我这边代码用到的
<script src="js/fastclick.js"></script> // 处理移动端 click 延迟
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
js-解决移动端点击事件的延迟问题的更多相关文章
- 移动端点击事件300ms延迟问题解决方案——fastclick.js
移动端点击事件300ms延迟的问题由来已久,如下截图 下面截图来自原文:https://www.jianshu.com/p/6e2b68a93c88 网上关于300ms延迟问题的解决方法,大致分为 3 ...
- js触发按钮点击事件
js触发按钮点击事件 博客分类: javascript 模拟JS触发按钮点击功能 <html> <head> <title>usually function&l ...
- 后台找到repeater里面的div并添加客户端点击事件
public partial class Inv_SelectWorkservice : System.Web.UI.Page,IPostBackEventHandler{ } 通过OnItemCre ...
- js中的点击事件(click)的实现方式
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- js input radio点击事件
html代码: <input type="radio" name="myname" value="1" />1 <inpu ...
- bootstrap table 生成的表格里动态添加HTML元素按钮,JS中添加点击事件,点击没反应---解决办法
bootstraptable中onExpandRow属性---js 方法添加的 html代码,然后给这代码里面的 元素 添加 事件,却获取不该元素.(称之为未来元素),由于是未来的 所以现在没有这个 ...
- 移动端300ms点击事件的延迟
移动端click事件300ms延迟 移动端click事件300ms的延迟在目前看来,已经是老生常谈了. 以下内容,我会在参考资源的基础上谈谈我对移动端click事件300ms延迟的一些理解.本人愚昧, ...
- js/jquery 禁用点击事件
前言 工作中经常遇到这种情况:验证邮箱页面的重新发送需要在3分钟后才可以点击触发请求,所以在这之前需要禁用他的点击. 网上查了后有以下几种实现方法 1.css禁用鼠标点击事件 .disabled { ...
- 解决label点击事件触发两次问题
问题描述: 通常,为了用户体验,我们点击单选框或者复选框后面文字,即可选中当前项.代码如下: <label> <input type="radio" name=& ...
随机推荐
- vsftpd服务安装与虚拟用户配置
vsftpd的全名是“Very secure FTP Daemon” 一.安装vsftpd安装db4-util用于生成认证文件 yum -y install db4-utils 安装vsftpd yu ...
- 【js】【vue】获取当前dom层
多层嵌套,$event.currentTarget 指当前点击层
- MAC系统里安装 Python
首先MAC系统自带Python2.6/2.7.这是因为有些系统文件需要.但是对于我来说,我需要用到Python3,所以需要自己下载安装.这时候,就有一个非常强大的软件 Homebrew.(安装方法见官 ...
- python能干什么?
python能干什么? 网络爬虫 爬虫,指的是从互联网采集数据的程序脚本 . 爬天爬地爬空气 ,无聊的时候爬一爬吃鸡数据.b站评论,能得出很多有意思的结论.知乎有个很有意思的问题——"利用爬 ...
- XML映射文件中关系映射
映射(多)对一.(一)对一的关联关系 1).使用列的别名 ①.若不关联数据表,则可以得到关联对象的id属性 ②.若还希望得到关联对象的其它属性.则必须关联其它的数据表 1.创建表: 员工表: DROP ...
- Counting Cliques HDU - 5952 单向边dfs
题目:题目链接 思路:这道题vj上Time limit:4000 ms,HDU上Time Limit: 8000/4000 MS (Java/Others),且不考虑oj测评机比现场赛慢很多,但10月 ...
- LightOj:1422-Halloween Costumes
传送门:http://www.lightoj.com/volume_showproblem.php?problem=1422 Halloween Costumes problem descriptio ...
- 第十四届华中科技大学程序设计竞赛决赛同步赛 Beautiful Land
It’s universally acknowledged that there’re innumerable trees in the campus of HUST.Now HUST got a b ...
- Java构造器(construtor)与垃圾收集器(GB)
在Java中,程序员会在乎内存中的两块空间. 堆(heap)和栈(stack). 当java虚拟机启动时, 它会从底层的操作系统取得一块内存, 并且以此块内存来执行java程序. 在Java中, 实例 ...
- Spring core resourc层结构体系及JDK与Spring对classpath中资源的获取方式及结果对比
1. Spring core resourc层结构体系 1.1. Resource相关结构体系 1.2. ResourceLoader相关体系 2. JDK与Spring对classpath中资源的获 ...