從零開始學 Web 之 移動Web（五）touch事件的缺陷，移動端常用外掛程式

標籤：旋轉   效果   一起   大量   知識   常用   www.   git   before   

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

• github：https://github.com/Daotin/Web
• 公眾號：Web前端之巔
• 部落格園：http://www.cnblogs.com/lvonve/
• CSDN：https://blog.csdn.net/lvonve/

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

一、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 能夠提供的特效更多，更加炫酷，相應的體積也更大。

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

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

臨時Tips：overflow:hidden 可以讓子項目浮動的父盒子由高度為0，到自動調整。

從零開始學 Web 之 移動Web（五）touch事件的缺陷，移動端常用外掛程式