zepto touch事件 | 易学教程

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>

来源：CSDN

作者：神奇大叔

链接：https://blog.csdn.net/weixin_43294560/article/details/104134781

标签

zepto