zepto touch事件

最新推荐文章于 2021-10-21 09:07:38 发布

神奇大叔

最新推荐文章于 2021-10-21 09:07:38 发布

阅读量409

点赞数

分类专栏： zepto.js 文章标签： zepto.js

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

版权

zepto.js 专栏收录该内容

7 篇文章 3 订阅

订阅专栏

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>

神奇大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
zepto touch事件

zepto touch事件击打事件 1、tap() 点击/敲打事件,只要点击就会触发,无论单双击 2、singleTap() 单击事件 3、doubleTap() 双击事件 3、longTap() 长按事件，当按下事件超过750ms时触发,长按过程中只会触发一次滑动事件(以30像素为基准) 4、swipe() 滑动事件,手指滑动默认为翻页，所以要执行滑动事件，要禁止滑动...
复制链接

扫一扫

专栏目录