#觸屏事件

1.事件型別

• touchstart: 手指觸控式螢幕幕時觸發
• touchmove: 手指在螢幕上移動時觸發
• touchend: 手指離開螢幕時觸發

2.TouchEvent物件

• touches: 位於螢幕上的所有手指的列表
• targetTouches: 位於該元素上所有手指的列表
• changedTouches: touchstart時包含剛與觸控式螢幕接觸的觸點，touchend時包含離開觸控式螢幕的觸點

3. Touch物件

• target ： 手指最初與螢幕接觸時的元素
• clientX/Y : 手指相對於layout view的水平/垂直畫素距離
• pageX/Y ： 手指相對於layout viewport的水平/垂直畫素距離（含滾動）
• screenX/Y ： 手指相對於layout viewport的水平/垂直畫素距離（含滾動）

移動開發通常會設定，這時這三對座標值是完全一樣的。

#zepto.js

jQuery和zepto.js有什麼區別？

jquery這個框架很好用獲取元素，操作dom,繫結事件，執行動畫。它在PC端的市場份額非常大，但是移動端用的非常少。移動端用zepto。

• zepto 是針對移動端，jQuery 是針對pc 端
• zepto 與jQuery 的用法一模一樣。連方法都長得一模一樣。而且zepto.js針對移動端，對觸屏事件有處理
• zepto 比jQuery 的體積要更小。因為zepto不用考慮相容問題，它用C3的一些特效，程式碼相對來說小很多。

zepto.js 定製

zepto.js 還有一個優點，zepto 有很多的方法，但是開發的時候不可能會使用所有方法。
zepto.js這些方法打散，分成多個js檔案。你需要使用到哪個方法，就找到對應的zepto.js 對應的js 檔案即可。

假設在頁面上面使用zepto 五個zetpo模組對應的功能，我就需要匯入五個不同的js 檔案。
這樣的話需要給伺服器傳送5次請求，非常損耗效能。

解決方案： 使用node.js定製

定製步驟:

1. 下載zepto.js 檔案，解壓
2. 開啟cmd.exe,切換到解壓後的zepto.js資料夾.
3. 使用npm install 這個命令(node自帶命令)
   這個命令會到這個解壓的資料夾下面去讀取一個叫做pakeage.json 的檔案。然後下載定製需要依賴的一些模組. 執行完這一步會到當前資料夾下面生成node_modules。
4. npm run-script dist 執行指令碼，這個命令會去讀取當前資料夾下面的make 的檔案。
   （需要定製zepto 的哪些模組，在make 的這個檔案裡面進行配置。在第41行新增即可）
5. 執行完了之後會到當前的資料夾下面生成一個dist 的資料夾，定製完成的的js 檔案會在dist裡面。

zepto.js 封裝了一個tap 事件，觸屏的時候觸發.

$("div").on("tap",function(){
      console.log("觸發觸屏事件");
   });

zepto.js還封裝了一些手勢

//手勢，向左滑動
  $("div").on("swipeLeft",function(){
      console.log("向左滑動.");
  });
//向右滑動.
$("div").on("swipeRight",function(){
      console.log("向右滑動.");
});

手勢滑動的原理：判斷distanceX=moveX-startX 的距離正負，而且distanceX要大於50才算是滑動。

zepto日期外掛mdatetimer