众所周知,在手机上的点击事件会有延迟300ms的问题。但在做手机端某些点击小游戏时,我们就需要取消这个延迟的问题;

第一步:禁止页面的缩放

  1. <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-解决移动端点击事件的延迟问题的更多相关文章

  1. 移动端点击事件300ms延迟问题解决方案——fastclick.js

    移动端点击事件300ms延迟的问题由来已久,如下截图 下面截图来自原文:https://www.jianshu.com/p/6e2b68a93c88 网上关于300ms延迟问题的解决方法,大致分为 3 ...

  2. js触发按钮点击事件

    js触发按钮点击事件 博客分类: javascript   模拟JS触发按钮点击功能 <html> <head> <title>usually function&l ...

  3. 后台找到repeater里面的div并添加客户端点击事件

    public partial class Inv_SelectWorkservice : System.Web.UI.Page,IPostBackEventHandler{ } 通过OnItemCre ...

  4. js中的点击事件(click)的实现方式

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  5. js input radio点击事件

    html代码: <input type="radio" name="myname" value="1" />1 <inpu ...

  6. bootstrap table 生成的表格里动态添加HTML元素按钮,JS中添加点击事件,点击没反应---解决办法

    bootstraptable中onExpandRow属性---js  方法添加的 html代码,然后给这代码里面的 元素 添加 事件,却获取不该元素.(称之为未来元素),由于是未来的 所以现在没有这个 ...

  7. 移动端300ms点击事件的延迟

    移动端click事件300ms延迟 移动端click事件300ms的延迟在目前看来,已经是老生常谈了. 以下内容,我会在参考资源的基础上谈谈我对移动端click事件300ms延迟的一些理解.本人愚昧, ...

  8. js/jquery 禁用点击事件

    前言 工作中经常遇到这种情况:验证邮箱页面的重新发送需要在3分钟后才可以点击触发请求,所以在这之前需要禁用他的点击. 网上查了后有以下几种实现方法 1.css禁用鼠标点击事件 .disabled { ...

  9. 解决label点击事件触发两次问题

    问题描述: 通常,为了用户体验,我们点击单选框或者复选框后面文字,即可选中当前项.代码如下: <label> <input type="radio" name=& ...

随机推荐

  1. 让Web站点崩溃最常见的七大原因

    转载自: https://blog.csdn.net/u012981511/article/details/53503242 1. 磁盘已满 导致系统无法正常运行的最可能的原因是磁盘已满.一个好的网络 ...

  2. windows 2008r2+php5.6.28环境搭建详细过程

    安装IIS7 安装php 网站验证 安装IIS7 1.打开服务器管理器(开始-计算机-右键-管理-也可以打开),添加角色 直接下一步 勾选Web服务器(IIS),下一步,有个注意事项继续下一步(这里我 ...

  3. nginx作为正向代理,反向代理的一些应用

    正向代理代理的对象是客户端 反向代理代理的对象是服务端 举例说下nginx作为正向代理作访问控制 server{ listen 80; server_name localhost jeson.gaos ...

  4. LeetCode(173) Binary Search Tree Iterator

    题目 Implement an iterator over a binary search tree (BST). Your iterator will be initialized with the ...

  5. 笔记-python-centos环境下安装配置

    笔记-python-centos环境下安装配置 1.      准备工作 环境准备 centos6.5 mini,已有python 2.6.6 下载源码包 Python官网下载Gzipped sour ...

  6. SMP IRQ Affinity

    转:非常有用的方法,调式神器 SMP IRQ Affinity Background: Whenever a piece of hardware, such as disk controller or ...

  7. 淘宝的TProfile分析

    TProfile是一个用来抓取性能数据的工具.大概是去年的时候对其分析了一下,并将它改造成了用于分析学习开源产品时的一个trace工具(不是很完善,自己用够用).现在将之前的笔记翻出来,记录一下. 1 ...

  8. EM算法简易推导

    EM算法推导 网上和书上有关于EM算法的推导,都比较复杂,不便于记忆,这里给出一个更加简短的推导,用于备忘. 在不包含隐变量的情况下,我们求最大似然的时候只需要进行求导使导函数等于0,求出参数即可.但 ...

  9. ubuntu检测到系统错误解决方法

    解决方案: 1.打开终端,输入 sudo gedit /etc/default/apport 2.把里面的enabled=1改成enabled=0,保存

  10. List容器——LinkedList及常用API,实现栈和队列

    LinkedList及常用API ①   LinkedList----链表 ②   LinkedList类扩展AbstractSequentialList并实现List接口 ③   LinkedLis ...