一、touch事件的缺陷

我們在上面《頁面分類》的專案中，對 tap 事件的處理使用的是 touch 事件處理的，因為如果使用 click 事件的話，總會有延時。

但是呢，touch 事件並不是完美的，不管是我們自己封裝的 tap 事件，還是 zepto 自帶的 tap 事件，在移動端都有一個致命的缺陷，就是“點透”。

什麼是“點透”呢？

假如有兩個盒子，盒子A和盒子B，如果盒子A在盒子B的上面，當我們使用 tap 事件點選盒子A的時候，盒子B會觸發 click 事件，這就是點透。

觸發這兩個事件的順序是 tap 事件，然後是 click 事件。因為 tap 事件內部是 touch 事件處理的，而 touch 事件是先於 click 事件觸發的。

這個時候，我們既想無延時，又不想觸發點透效果，而且有的時候，我們希望我們的網頁不僅可以在移動端訪問，在 PC 模式下也可以訪問，但是 tap 事件只能在移動端使用，所以只能用 click 事件，但是 click 又有延時，怎麼辦呢？

我們知道， touch 事件只能在移動端使用，這個我們無法改變，所以我們只能改變延時的問題，於是我們就引入了 "fastclick.js" 庫檔案，解決 click 的延時問題。

使用方式：

1、引入 fastclick.js 檔案。

2、在 script 中加入以下函式：

原生 js 的話，加入：

if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        // document.body 表示整個body下的所有元素都是用fastclick效果，可以修改。
        FastClick.attach(document.body);
    }, false);
}
 

jQuery 或 Zepto 的話：

$(function() {
    FastClick.attach(document.body);
});

3、正常使用 元素.addEventListener("click", function(){}) 或者 元素.on("click", function(){}) ，來使用改裝過後的 click 事件，這個 click 事件沒有延時。

二、移動端的一些常用外掛

見識到 fastclick 外掛的好處之後，我們就挖掘出了更多好用的外掛，可以大大提高我們開發的效率。

1、iScroll

以下為官方介紹：

iScroll是一個高效能，資源佔用少，無依賴，多平臺的 javascript 滾動

它可以在桌面，移動裝置和智慧電視平臺上工作。它一直在大力優化效能和檔案大小以便在新舊裝置上提供最順暢的體驗。

iScroll不僅僅是 滾動。它可以處理任何需要與使用者進行移動互動的元素。在你的專案中包含僅僅4kb大小的iScroll，你的專案便擁有了滾動，縮放，平移，無限滾動，視差滾動，旋轉功能。給它一個掃帚它甚至能幫你打掃辦公室。

即使平臺本身提供的滾動已經很不錯，iScroll可以在此基礎上提供更多不可思議的功能。具體來說：

細粒度控制滾動位置，甚至在滾動過程中。你總是可以獲取和設定滾動器的x，y座標。
動畫可以使用使用者自定義的擦出功能（反彈'bounce'，彈性'elastic'，回退'back'，...）。
你可以很容易的掛靠大量的自定義事件（onBeforeScrollStart, *
開箱即用的多平臺支援。從很老的安卓裝置到最新的iPhone，從Chrome瀏覽器到IE瀏覽器。

使用方式：

1、希望你的結構如下，但是不限定標籤（下面的 ul 可以改為 div，li 可以改為 p 等，不限定標籤型別）。

<div id="wrapper">
    <ul>
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</div>

2、在 script 標籤中初始化 iScroll。

var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);

如果是 jQuery 的話更簡單了，一句話：

var myScroll = new IScroll(".wrapper");

3、如果想實現像滾輪，顯示滾動條等效果，可以在初始化的時候，將這些需求作為物件，填入第二個引數中，比如，增加滾輪上下滾動操作和顯示滾動條的效果：

var myScroll = new IScroll(".wrapper", {
  mouseWheel: true, // 使用滾輪
  scrollbars: true  // 顯示滾動條
});

如此簡單三步操作，就可以輕鬆實現你想要的功能。

2、swipe

swipe.js 是一個比較有名的觸控滑動外掛，它能夠處理內容滑動，支援自定義選項，你可以讓它自動滾動，控制滾動間隔，返回回撥函式等。經常作為輪播圖使用。

使用方法：

1、引入 swipe.js 檔案

2、希望你的 html 結構為（不限定標籤名稱）：

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

3、對其格式進行設定（固定寫法，最好不要修改，當然類名稱需要修改）

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

3、在 script 中進行初始化操作：

window.mySwipe = Swipe(document.getElementById('slider'));

4、如果你想要自動輪播，滑動等操作，需要在初始化的第二個引數中，引入一個物件，比如：

window.mySwipe = new Swipe(document.getElementById('slider'), {
  startSlide: 2,  // 預設顯示第二張圖片
  speed: 400,     // 過渡400ms
  auto: 3000,     // 輪播間隔 2s
  continuous: true,  // 迴圈輪播（預設開啟）
  disableScroll: false,  // 禁止滑動（預設關閉）
  stopPropagation: false,
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});

5、當然你還可以在 PC 上使用左右兩個按鈕來上一張下一張翻頁。swipe 會提供 next() , prev() 等函式來實現上一張下一張翻頁。比如：

document.getElementById('btn1').onclick = function(){
  window.mySwipe.prev(); // 呼叫系統的prev()方法
};

document.getElementById('btn2').onclick = function(){
  window.mySwipe.next(); // 呼叫系統的next()方法
};

3、swiper

swiper 與 swipe 類似，都可以提供輪播觸控滑動的效果，只不過 swiper 能夠提供的特效更多，更加炫酷，相應的體積也更大。

需要注意的是，swiper 不同於 swipe，它也是結構固定，不限標籤的，唯一的區別是類樣式的名稱是不可改變的。因為它引入了庫檔案的 css 樣式。所以最好不要改變類樣式的名稱。具體的內容可以參考官網，有很多詳細的使用說明和特效演示。

臨時Tips：overflow:hidden 可以讓子元素浮動的父盒子由高度為0，到自動伸縮。