fastclick插件

红太狼 2022-02-03 12:23 274阅读 0赞

**移动端点击事件的延迟现象:**

**原因**: 移动端的双击事件会产生页面缩放的效果; 所以移动端在判断clicka事件的时候会有 300ms 左右的延迟;

**解决方法:**

1. 禁止移动端页面的缩放

\`<meta name = "viewport" content="user-scalable=no" > \`

缺点: 页面无法缩放

2. 更改默认视口的宽度

\`<meta name="viewport" content="width=device-width">\`

缺点: 需要浏览器的支持

3. css touch-action: none;

缺点: 新属性, 可能需要浏览器的支持

4.zepto中封装的tap事件

缺点: 穿透

![复制代码][copycode.gif]

//穿透产生的条件
        //1. 两个兄弟元素,其中一个浮动在另一个上(如果是父子元素, 就涉及到冒泡了)
        
        //2. 浮在上面的元素触发touch事件,该元素隐藏;由于touch事件连带也会触发click事件,click事件会有300ms左右的延迟, 而此时第一个元素已经消失, 
    所以click事假会在第二个元素上触发

![复制代码][copycode.gif]

5. fastclick插件

原理: 在检测到touchend事件后, 会通过dom自定义事件模拟一个click事件,并把浏览器300ms之后真正触发的点击事件屏蔽掉

![复制代码][copycode.gif]

//fastclick 插件的使用方法
    
         //1.引入js
     <script src="js/zepto.min.js"></script>
     <script src="js/fastclick.js"></script>//
    
         //2. 给body所有的元素绑定click事件,之后click事件就可以正常使用
      $(function() {
    
          FastClick.attach(document.body);
    
      });

![复制代码][copycode.gif]

**tips: **

1) 移动端添加事件,使用 addEventListener; 如果是jq对象要转为dom对象

2) 移动端的 touchstart touchmove touchend 事件 类似pc端的 mousedown mousemove mouseup 事件

targetTouches  changedTouches

首先是资源的下载：fastclick.js

作为一个新手，插件原理什么的研究不透，看的也是似懂非懂的，网上有很多大牛写的博文相当的好，对于写文章方面确实是望尘莫及啊，所以想详细了解原理的朋友直接去大牛的博客里欣赏吧【读fastclick源码有感】

在这里我只是简单的记录下简单的用法，还请大牛们不吝赐教

为什么存在延迟？

从点击屏幕上的元素到触发元素的 click 事件，移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢？ 因为它想看看你是不是要进行双击（double tap）操作。

引入插件步骤

①在HTML页面中添加

if ('addEventListener' in document) \{  
    document.addEventListener('DOMContentLoaded', function() \{  
        FastClick.attach(document.body);  
    \}, false);  
\}  
  如果你使用了JQuery，那么JS引入就可以改用下面的写法：

$(function() \{  
    FastClick.attach(document.body);  
\});

如果你使用Browserify或者其他CommonJS-style 系统,当你调用\`require('fastclick')\`时，\`FastClick.attach\`事件会被返回，加载FastClick最简单的方式就是下面的方法了：

var attachFastClick = require('fastclick');  
attachFastClick(document.body);

\---------------------   
转自：[https://www.cnblogs.com/noraZhang/p/10143398.html][https_www.cnblogs.com_noraZhang_p_10143398.html]  
转自：https://blog.csdn.net/zfy865628361/article/details/49512095

[copycode.gif]: /images/20220203/df9b68a07ae641ffa3809eb5a442d78c.png
[https_www.cnblogs.com_noraZhang_p_10143398.html]: https://www.cnblogs.com/noraZhang/p/10143398.html