插件的使用(3) - fastclick

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

原因: 移动端的双击事件会产生页面缩放的效果; 所以移动端在判断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事件

　　　　缺点: 穿透

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

　　5. fastclick插件

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

//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);

  });

tips: 

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

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

　　　　targetTouches  changedTouches

 

转载于:https://www.cnblogs.com/noraZhang/p/10143398.html