zoukankan      html  css  js  c++  java
  • 插件的使用(3)

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

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

  • 相关阅读:
    fiximulator
    Maven POM 模板[z]
    Sentinel 实战-控制台篇[z]
    Sentinel 实战-限流篇[z]
    RPC 框架
    如何手写实现简易的Dubbo[z]
    降级、熔断、限流[z]
    Transfix
    Memcached和Memcache安装(64位win7)[z]
    Oracle分区表例子
  • 原文地址:https://www.cnblogs.com/noraZhang/p/10143398.html
Copyright © 2011-2022 走看看