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=& ...
随机推荐
- 01、Linux介绍
一. Linux介绍 Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.它能运行主要的UNIX工具软件.应用程序和 ...
- SimpleDateFormat优化写法
在一个读取数据库数据导出到excel文件的例子当中,每次处理一个时间信息的时候,就需要创建一个SimpleDateFormat实例对象,然后再丢弃这个对象.大量的对象就这样被创建出来,占用大量的内存和 ...
- Django之FileField字段
头像上传 在头像上传的时候,属于文件类型 首先视图函数获取的时候,request.FILES.get('文件名变量') avatar_obj = request.FILES.get('avatar') ...
- LeetCode(279)Perfect Squares
题目 Given a positive integer n, find the least number of perfect square numbers (for example, 1, 4, 9 ...
- 图上两点之间的第k最短路径的长度 ACM-ICPC 2018 沈阳赛区网络预赛 D. Made In Heaven
131072K One day in the jail, F·F invites Jolyne Kujo (JOJO in brief) to play tennis with her. Howe ...
- Linux学习-延伸正则表达式
grep 默认仅支持基础正则表达式,如果要使用延伸型正则 表达式,你可以使用 grep -E , 不过更建议直接使用 egrep !直接区分指令比较好记忆!其 实 egrep 与 grep -E 是类 ...
- STM8时基单元
STM8时基单元 时基单元包含: 16位向上/向下计数器 16位自动重载寄存器 重复计数器 预分频器 (图29:STM8 时基单元) 16位计数器,预分频器,自动重载寄存器和重复计数器寄存器都可以通过 ...
- bootstrap 弹出框(Popover)插件 修改title等属性选项值
<button type="button" class="btn btn-default ht-btn" data-toggle="popove ...
- 《Scrum实战》第2次课【取得大家的支持】课后作业汇总
作业:<变革之心>读后感 孟帅: 2017-7-12http://www.cnblogs.com/mengshuai1982/p/7153985.html
- C++ 指针的小知识
看个小例子: char* fun1(){ char * p = (char*)malloc(100); p = "helloww"; return p;} void fun2(ch ...