從零開始學 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 前端學習的探索之旅吧！
一、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事件的缺陷，移動端常用插件