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=& ...
随机推荐
- 如何用纯 CSS 创作一个过山车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/KBxYZg/ 可交互视频 此视频是 ...
- 动态设置html的title
使用vue前端框架做,竟然丢弃了很多javascript和html的东西了..动态设置title的方法: 1.使用vue的自定义指令 <div v-title>{{htmltitle}}& ...
- selenium+phantomjs爬取bilibili
selenium+phantomjs爬取bilibili 首先我们要下载phantomjs 你可以到 http://phantomjs.org/download.html 这里去下载 下载完之后解压到 ...
- 基于IAR6或者IAR7建立STM32开发工程(通过实际测试,使用IAR6.30.4)
IAR和keil两个开发平台都是arm开发当中比较流行的平台,keil4的版本之间,可以兼容,但是版本4和版本5还是不兼容的,但是IAR的兼容性更加差,好像6.30.x之间是能够兼容的吧,没有实测过, ...
- POJ:1961-Period(寻找字符串循环节)
Period Time Limit: 3000MS Memory Limit: 30000K Description For each prefix of a given string S with ...
- debian使用sudo
debian默认没有sudo ,在命令前无法使用sudo #切换到根用户$ su 输入根用户密码 # apt-get install sudo # nano /etc/sudoers 文件的 User ...
- HBase0.94.2-cdh4.2.0需求评估测试报告1.0之一
hbase是bigtable的开源山寨版本.是建立的hdfs之上,提供高可靠性.高性能.列存储.可伸缩.实时读写的数据库系统.它介于nosql和RDBMS之间,仅能通过主键(row key)和主键的r ...
- Python之code对象与pyc文件(三)
上一节:Python之code对象与pyc文件(二) 向pyc写入字符串 在了解Python如何将字符串写入到pyc文件的机制之前,我们先来了解一下结构体WFILE: marshal.c typede ...
- python - unitest - 实战题目
'''题目要求 1:自己写一个工具类,完成数学的加减乘除以及平方积操作2:对每个方法写2个用例3:针对测试用例选用不同的方法去执行,然后生成测试报告''' '''实现: 3个文件: work_2018 ...
- [python工具][2]sublime的快捷键
十.Sublime Text 快捷键列表 快捷键按类型分列如下: 1.通用 ↑↓← → 上下左右移动光标 Alt 调出菜单 Ctrl + Shift + P 调出命令板(Comma ...