码迷,mamicode.com
首页 > 移动开发 > 详细

js-解决移动端点击事件的延迟问题

时间:2018-03-06 17:00:54      阅读:543      评论:0      收藏:0      [点我收藏+]

标签:div   dev   tag   word   device   art   端点   XML   取消   

众所周知,在手机上的点击事件会有延迟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-解决移动端点击事件的延迟问题

标签:div   dev   tag   word   device   art   端点   XML   取消   

原文地址:https://www.cnblogs.com/liuqingxia/p/8514585.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!