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