zepto 入门

2017-03-17
文章来源：http://www.cnblogs.com/daysme

zepto 简介

jq虽然有一些衍生的插件可用在移动端上，但它有点大。
click 有，但有问题
onmouseover 无
onmousemoser 无
touch
tap 像 pc 端的 click
300ms 用来判断点击有没有后续操作。
为了确认用户是单击还是双击。
由 iphone 也采用， android 后续采用。
移动端的所有 click 都要慢 300ms，
在移动端没有多少兼容问题，但 jq 有不少代码都是处理兼容的。
zepto 没有太多这些兼容代码，文件比较小。
zepto 本来的思想是让大家需要的功能自己加上去。所以核心代码只有7个模块。
然后也并不是谁都会封装的，封装也使 zepto 发展比较慢。
所以初学前期不建议去官网下载，而使用别人已经封装过其他功能的。
如果后期自己有了一些使用经验，感觉不够用时，再去 githup 下载源码，封装自己的版本。

实例

点击 tap

```
$(function(){
  $(document).tap(function(){
    alert(1);
  })
})
```

触摸，按上去但没有松开手 touchstart

```
$(function(){
  $(document).on('touchstart',function(){
    console.log(1);
  })
})
```

滑动，按住并移动 touchmove
离开屏幕，有时也用来代替点击 touchend
系统取消 touch 事件时。 touchcancel
- 安卓移动结束时触发 touchcancel 事件，
- 苹果正常触发 touchend 。
- 类似的兼容有表单输入时的输入法调用问题。
长按，750ms 时。 longTap
单击，和 tap 差不多。 singleTap
双击。 doubleTap
与 jquery 不同的， event 事件。在电脑上只有鼠标，在手机上有多个手指。
屏幕上的所有触点列表 e.touches

$(function(){ $(document).on('touchstart',function(e){ console.log(e.touches); }) })

触点一按下时的坐标 e.touches[0].clientX

```
$(function(){
  $(document).on('touchstart',function(e){
    console.log(e.touches[0].clientX);
  })
})
```

位于 dom 上触点列表 e.targetTouches
涉及当前事件的触点列表 e.changedTouches
触点一离开时的坐标是多少？
- 因为手机和电脑不同，手机会有多个触点情况。所以不能直接通过 e.clientX 方式获取坐标。
- 移动端事件 event 里存在一个触点集合 touches 数组，通过获取数组的第一个元素来获取坐标位置，
- 也就是第一个触点的坐标。 e.touches[0].clientX e.touches[0].clientY 。
但是 touchend 事件代表触点离开屏幕，不存在触碰这一说。所以此时 e.touches 的长度是 0 。
也就是说不能再通过 touchend 的处理函数中获取坐标了。
需要通过 changedTouches 集合。

触点一离开时的坐标 e.changedTouches["0"].clientX

```
$(function(){
  $(document).on('touchend',function(e){
    console.log(e.touches); //长度为 0
    console.log(e.changedTouches["0"].clientX);
  })
})
```

如果需要获取 tap 的坐标，请使用 touchstart 。

```
$(function(){
  $(document).on('touchstart',function(e){
    console.log(e.changedTouches["0"].clientX);
  })
})
```

从元素滑动 swipe

```
$(function(){
  $(document).on('swipe',function(e){
    console.log(1);
  })
})
```

滑动方向， swipeUp/swipeRight/swipeDown/swipeLeft 如何斜着滑时，看哪边滑得多。

```
$(function(){
  $(document).on('swipeUp',function(e){
    console.log('swipeUp');
  })
  $(document).on('swipeRight',function(e){
    console.log('swipeRight');
  })
  $(document).on('swipeDown',function(e){
    console.log('swipeDown');
  })
  $(document).on('swipeLeft',function(e){
    console.log('swipeLeft');
  })
})
```

MD:

- 2017-03-17
- 文章来源：http://www.cnblogs.com/daysme
## zepto 简介

- jq虽然有一些衍生的插件可用在移动端上，但它有点大。
- click 有，但有问题
- onmouseover 无
- onmousemoser 无

- touch
- tap 像 pc 端的 click

- 300ms 用来判断点击有没有后续操作。
- 为了确认用户是单击还是双击。

- 由 iphone 也采用， android 后续采用。
- 移动端的所有 click 都要慢 300ms，

- 在移动端没有多少兼容问题，但 jq 有不少代码都是处理兼容的。
- zepto 没有太多这些兼容代码，文件比较小。

- zepto 本来的思想是让大家需要的功能自己加上去。所以核心代码只有7个模块。
- 然后也并不是谁都会封装的，封装也使 zepto 发展比较慢。
- 所以初学前期不建议去官网下载，而使用别人已经封装过其他功能的。

- 如果后期自己有了一些使用经验，感觉不够用时，再去 githup 下载源码，封装自己的版本。

## 实例

  **点击 tap**

    ```
    $(function(){
      $(document).tap(function(){
        alert(1);
      })
    })
    ```

  触摸，按上去但没有松开手 touchstart

    ```
    $(function(){
      $(document).on('touchstart',function(){
        console.log(1);
      })
    })
    ```

  - 滑动，按住并移动 touchmove
  - 离开屏幕，有时也用来代替点击 touchend

  - 系统取消 touch 事件时。 touchcancel
    - 安卓移动结束时触发 touchcancel 事件 ，
    - 苹果正常触发 touchend 。
    - 类似的兼容有表单输入时的输入法调用问题。

  - 长按，750ms 时。 longTap
  - 单击，和 tap 差不多。 singleTap
  - 双击。 doubleTap

  - 与 jquery 不同的， event 事件。在电脑上只有鼠标，在手机上有多个手指。

  - 屏幕上的所有触点列表 e.touches

    ```
    $(function(){
      $(document).on('touchstart',function(e){
        console.log(e.touches);
      })
    })
    ```

  触点一按下时的坐标 e.touches[0].clientX

    ```
    $(function(){
      $(document).on('touchstart',function(e){
        console.log(e.touches[0].clientX);
      })
    })
    ```

  - 位于 dom 上触点列表 e.targetTouches
  - 涉及当前事件的触点列表 e.changedTouches

  - 触点一离开时的坐标是多少？
    - 因为手机和电脑不同，手机会有多个触点情况。所以不能直接通过 e.clientX 方式获取坐标。
    - 移动端事件 event 里存在一个触点集合 touches 数组，通过获取数组的第一个元素来获取坐标位置，
    - 也就是第一个触点的坐标。 e.touches[0].clientX e.touches[0].clientY 。

  - 但是 touchend 事件代表触点离开屏幕，不存在触碰这一说。所以此时 e.touches 的长度是 0 。
  - 也就是说不能再通过 touchend 的处理函数中获取坐标了。
  - 需要通过 changedTouches 集合。

  触点一离开时的坐标 e.changedTouches["0"].clientX

    ```
    $(function(){
      $(document).on('touchend',function(e){
        console.log(e.touches); //长度为 0
        console.log(e.changedTouches["0"].clientX);
      })
    })
    ```

  如果需要获取 tap 的坐标，请使用 touchstart 。

    ```
    $(function(){
      $(document).on('touchstart',function(e){
        console.log(e.changedTouches["0"].clientX);
      })
    })
    ```

  从元素滑动 swipe

    ```
    $(function(){
      $(document).on('swipe',function(e){
        console.log(1);
      })
    })
    ```

  滑动方向， swipeUp/swipeRight/swipeDown/swipeLeft 如何斜着滑时，看哪边滑得多。

    ```
    $(function(){
      $(document).on('swipeUp',function(e){
        console.log('swipeUp');
      })
      $(document).on('swipeRight',function(e){
        console.log('swipeRight');
      })
      $(document).on('swipeDown',function(e){
        console.log('swipeDown');
      })
      $(document).on('swipeLeft',function(e){
        console.log('swipeLeft');
      })
    })
    ```

View Code