从零开始学 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，到自动伸缩。