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=& ...
随机推荐
- Head First Python (二)
if...else... 1 movies = ["The Holy Grail",1975,"Terry Jones & Terry Gilliam" ...
- HDU 5527 Too Rich 贪心
题意: 有\(10\)种面值为\(1, 5, 10, 20, 50, 100, 200, 500, 1000, 2000\)的纸币,现在你要选最多的数量凑成\(p\)块钱. 分析: 同样分析问题的反面 ...
- 通用的前端js代码
1.判断是否移动设备的浏览器,是否允许触摸事件.(响应式网页) if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i. ...
- python基础-爬虫
爬虫引入 爬虫: 1 百度:搜索引擎 爬虫:spider 种子网站开始爬,下载网页,分析链接,作为待抓取的网页 分词 index:词--->某个结果 Page rank(1 网站很大(互链) ...
- [已解决] wordpress 修改 permalink 后 页面 404 问题
功能说明 为了利于SEO优化,我们需要将地址设置为永久链接,在层级不要太深的情况下实现伪静态页面的目的,例如wordpress 默认页面地址为: https://www.ryanzoe.top/?p= ...
- 使用phppgadmin 遇到的小问题
无法登录,显示错误消息如下: Error:login disallowed for security reasons. 解决方法: 修改conf/config.inc.php文件中的extra_log ...
- 常用类--Date日期类,SimpleDateFormat日期格式类,Calendar日历类,Math数学工具类,Random随机数类
Date日期类 Date表示特定的时间,精确到毫秒; 构造方法: public Data() public Date(long date) 常用方法: public long getTime() pu ...
- vs2015代码图
可以看到代码的调用关系. 知乎文章:IDE 而言,是 Xcode 的技术比较先进还是 Visual Studio?
- ansible /usr/bin/python: not found
使用ansible命令的时候出错 ansible all -m ping 出现报错 192.168.199.154 | FAILED! => { "changed": fal ...
- 九度oj 题目1552:座位问题
题目描述: 计算机学院的男生和女生共n个人要坐成一排玩游戏,因为计算机的女生都非常害羞,男生又很主动,所以活动的组织者要求在任何时候,一个女生的左边或者右边至少有一个女生,即每个女生均不会只与男生相邻 ...