移动端JS开发库zepto.js基础知识点

中文官方文档：https://www.html.cn/doc/zeptojs_api/

一、委托的事件先被依次放入数组队列里，然后由自身开始往后找直到找到最后，期间符合条件的元素委托的事件都会执行。
　　1、委托在同一个父元素,或者触发的元素的事件范围小于同类型事件(冒泡能冒到自身范围)
　　2、同一个事件
　　3、委托关联  操作的类要进行关联
　　4、绑定顺序---从当前的位置往后看
　　5、touchstart() 是zepto专有移动端的事件函数

 $('#box').on('touchstart', '.a', function () {
    alert('aaaaaa');
    $(this).removeClass().addClass('b');
});

  $('#box').on('touchstart', '.b', function () {
      alert('bbbb');
      $(this).removeClass().addClass('a');
  });

  $('#box').append('<p class="a">我是新添加的</p>')

二、zepto无法获取隐藏元素的宽高

 $(function () {
        console.log($('#box').width());
        console.log($('#box').height());   //结果是0
    });

三、zepto touch方法

1、tap()  点击事件 利用在document上绑定touch事件来模拟tap事件的，并且tap事件会冒泡到document上
2、 singleTap()  点击事件
3、 doubleTap()  双击事件
4、 longTap()    当一个元素被按住超过750ms触发。
5、 swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过（同一个方向大于30px）时触发。(可选择给定的方向)
在一个方向滑动大于30px即为滑动。否则算点击。

 $(function () {
      /*$("#box1").on('tap', function () {
          alert("taptap");
      });*/

      $('#box1').tap(function () {
          alert('taptap');
      });

      // singRap()   单击事件
      $('#box2').singleTap(function () {
          alert('单击事件');
      });

      // doubleTap()   双击事件
      $('#box2').doubleTap(function () {
          alert('双击事件');
      });

      // longTap()    当一个元素被按住超过750ms触发。
      $('#box3').longTap(function () {
          alert('长按产生效果');
      });

      //滑动事件swipe
      $('#btn').swipeLeft(function () {
          alert('滑动效果');
      });
  });

移动端JS开发库zepto.js基础知识点

猜你喜欢