zepto touch事件

港控/mmm° 2021-07-24 18:03 405阅读 0赞

zepto touch事件
    
    击打事件
      1、tap() 点击/敲打事件,只要点击就会触发,无论单双击
      2、singleTap() 单击事件
      3、doubleTap() 双击事件
      3、longTap() 长按事件，当按下事件超过750ms时触发,长按过程中只会触发一次
    
    滑动事件(以30像素为基准)
      4、swipe() 滑动事件,手指滑动默认为翻页，所以要执行滑动事件，要禁止滑动事件的默认行为touch-action:none;默认为auto开启
      5、swipeLeft() 左滑动事件
      6、swipeRight() 右滑动事件
      7、swipeUp() 上滑动事件
      8、swipeDown() 下滑动事件

代码示例:

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
      <title>zepto_touch</title>
      <style type="text/css">
              *{ 
                  touch-action:none;
              }
        .box{ 
          width: 100px;
          height: 100px;
          background: #FFFF00;
          margin: 0 auto;
          text-align: center;
          line-height: 100px;
        }
        .btn{ 
          width: 100px;
          height: 50px;
          background: #FF0000;
          border-radius: 10px;
          margin: 0 auto;
        }
      </style>
    </head>
    <body style="height: 1000px;">
    
      <div id="box" class="box">按钮1</div>
      <br />
      <div id="box2" class="box">按钮2</div>
      <br />
      <div id="box3" class="box">按钮3</div>
      <button id="btn" class="btn">button</button>
      <script src="../js/zepto.js" type="text/javascript" charset="utf-8"></script>
      <script src="../js/touch.js" type="text/javascript" charset="utf-8"></script>
      <script type="text/javascript">
        $(function(){ 
    
          $('#box').tap(function(){ console.log(1)});// $('#box').on('tap',function(){...})
          $('#box2').singleTap(function(){ console.log('单击了一下')});
          $('#box3').doubleTap(function(){ console.log('双击了一下')});
          $('#box3').longTap(function(){ console.log('长按了一下')});
    
          $('#btn').swipeDown(function(){ console.log('滑动了一下')});
    
        })
    
      </script>
    </body>
    </html>