從零開始學 Web 之 移動Web（五）touch事件的缺陷，移動端經常使用插件

你們好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......

• github：https://github.com/Daotin/Web
• 微信公衆號：Web前端之巔
• 博客園：http://www.cnblogs.com/lvonve/
• CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的探索之旅吧！

1、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 的延時問題。

使用方式：

一、引入 fastclick.js 文件。

二、在 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);
});

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

2、移動端的一些經常使用插件

見識到 fastclick 插件的好處以後，咱們就挖掘出了更多好用的插件，能夠大大提升咱們開發的效率。

一、iScroll

如下爲官方介紹：

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

它能夠在桌面，移動設備和智能電視平臺上工做。它一直在大力優化性能和文件大小以便在新舊設備上提供最順暢的體驗。

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

即便平臺自己提供的滾動已經很不錯，iScroll能夠在此基礎上提供更多難以想象的功能。具體來講：

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

使用方式：

一、但願你的結構以下，可是不限定標籤（下面的 ul 能夠改成 div，li 能夠改成 p 等，不限定標籤類型）。

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

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

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

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

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

三、若是想實現像滾輪，顯示滾動條等效果，能夠在初始化的時候，將這些需求做爲對象，填入第二個參數中，好比，增長滾輪上下滾動操做和顯示滾動條的效果：

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

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

二、swipe

swipe.js 是一個比較有名的觸摸滑動插件，它可以處理內容滑動，支持自定義選項，你可讓它自動滾動，控制滾動間隔，返回回調函數等。常常做爲輪播圖使用。

使用方法：

一、引入 swipe.js 文件

二、但願你的 html 結構爲（不限定標籤名稱）：

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

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

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

三、在 script 中進行初始化操做：

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

四、若是你想要自動輪播，滑動等操做，須要在初始化的第二個參數中，引入一個對象，好比：

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) {}
});

五、固然你還能夠在 PC 上使用左右兩個按鈕來上一張下一張翻頁。swipe 會提供 next() , prev() 等函數來實現上一張下一張翻頁。好比：

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

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

三、swiper

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

使用說明： 參考連接：http://www.swiper.com.cn/usage/index.html

須要注意的是，swiper 不一樣於 swipe，它也是結構固定，不限標籤的，惟一的區別是類樣式的名稱是不可改變的。由於它引入了庫文件的 css 樣式。因此最好不要改變類樣式的名稱。具體的內容能夠參考官網，有不少詳細的使用說明和特效演示。

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