JavaScript——移动端网页特效（包括：触屏事件、移动端常用开发插件、移动端常用开发框架等）

触屏事件

1.触屏事件概述

• 移动端浏览器兼容性较好，可以不需要考虑JS的兼容性问题，可以放心的使用原生JS书写效果，但是移动端也有自己独特的地方。比如触屏事件（也称触摸事件），Android和IOS都有。

• touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触控笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。

• 常见的触屏事件如下：

触屏touch事件	说明
touchstart	手指触摸到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动时触发
touchend	手指从一个DOM元素上移开时触发

2.触摸事件对象（TouchEvent）

• TouchEvent是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。

• touchstart、touchmove、touchend三个事件都有事件对象。

• 触摸事件对象重点我们看三个常见对象列表：

触摸列表	说明
touches	正在触摸屏幕的所有手指的一个列表（数组）
targetTouches	正在触摸当前DOM元素上的手指的一个列表（数组）
changedTouches	手指状态发生了改变的列表，从无到有，从有到无变化

• 一般都是给元素注册触摸事件，所以重点记住targetTouches。

3.移动端拖动元素

• touchstart、touchmove、touchend可以实现拖动元素。

• 拖动元素需要当前手指的坐标值，可以使用targetTouches[0]里面的pageX和pageY。

• 移动端拖动的原理：手指移动中，计算出手指移动的距离，然后用盒子原来的位置 + 手指移动的距离。

• 手指移动的距离：手指滑动中的位置 - 手指刚开始触摸的位置。

• 拖动元素的步骤如下：

  1.触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置。

  2.移动手指touchmove：计算手指的滑动距离，并且移动盒子。

注意：
1.手指移动会触发滚动屏幕，所以要阻止默认的屏幕滚动e.preventDefault()。
2.移动端拖动元素不需要用到touchend，而PC端拖动元素需要用到mousedown、mousemove、mouseup。

移动端常用开发插件

• JS插件就是js文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如：轮播图和瀑布流插件。
• 特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。

1.fastclick插件的使用

• 先到GitHub上复制js代码到项目中。（新建一个文件夹）
• 引入js文件。
• 按照GitHub上的使用说明调用该方法。
• 正常使用click点击事件。（不会有300ms的延迟问题）

2.Swiper插件的使用

• 中文官网地址：https://www.swiper.com.cn/

• 使用方法：

  1.引入插件相关文件。（一个css文件，一个js文件）

  2.按照规定语法使用。

3.其他移动端常见插件

• superslide：http://www.superslide2.com/
• scroll：https://github.com/cubiq/iscroll
• zy.media.js：视频插件

4.插件的使用总结

• 使用总结如下：

  （1）确认插件实现的功能

  （2）去官网查看使用说明

  （3）下载插件

  （4）打开demo实例文件，查看需要引入的相关文件，并且引入

  （5）复制demo实例文件中的结构html，样式css以及js代码

移动端常用开发框架

1.框架的概述

• 框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。

• 插件一般是为了解决某个问题而专门存在，其功能单一，并且比较小。

• 前端常用的框架有Bootstrap、Vue、Angular、React等，它们既能开发PC端，也能开发移动端。

• 前端常用的移动端插件有swiper、superslide、iscroll等。

2.Bootstrap

• Bootstrap是一个简洁、直观、强悍的前端开发框架，它让web开发更迅速、简单，并且它可以开发pc端，也可以开发移动端。

• Bootstrap JS插件使用步骤：

  （1）引入相关js文件

  （2）复制HTML结构

  （3）修改对应样式

  （4）修改相应JS参数

课外知识点

1.classList属性

• classList属性是HTML5新增的一个元素，返回元素的类名，但是IE10以上版本才支持。

var div = document.querySelevtor('div');
console.log(div.classList);		//得到的是一个伪数组

• 该属性还可以用于添加、移除和切换CSS类，方法如下：

  1.添加类：

  element.classList.add('类名');	//类名不需要加.
  

  2.移除类：

  element.classList.remove('类名');		//类名不需要加.
  

  3.切换类：

  element.classList.toggle('类名');		//类名不需要加.
  

2.click延时解决方案

• 移动端click事件会有300ms的延时，原因是移动端屏幕双击会缩放页面。

• 解决方案：

  1.禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。（浏览器不能缩放，也不能双击缩放）

  <meta name="viewport" content="user-scalable=no">
  

  2.利用touch事件自己封装这个事件解决300ms的延迟。（浏览器可以缩放，但不能双击缩放）

  原理：

  （1）当我们手指触摸屏幕，记录当前触摸时间

  （2）当我们手指离开屏幕，用离开的时间减去触摸的时间

  （3）如果时间小于150ms，并且没有滑动过屏幕，那么我们就定义为点击

  //封装tap，解决click 300ms的延时
  function tap(obj, callback){
    var isMove = false;
    var startTime = 0;	//记录触摸时候的时间变量
    obj.addEventListener('touchstart',function(e){
      startTime = Date.now();	//记录触摸时间
    });
    obj.addEventListener('touchmove', function(e){
      isMove = true;	//看看是否有滑动，有滑动算拖拽，不算点击
    });
    obj.addEventListener('touchend', function(e){
      if(!isMove && (Date.now() - startTime) < 150){	//如果手指触摸和离开时间小于150ms，算点击
        callback && callback();		//执行回调函数
      }
      isMove = false;	//取反，重置
      startTime = 0;
    });
  }
  //调用
  tap(div, function(){  执行代码 })
  

  缺点：一次只能给一个元素解决300ms延迟问题，如果有100个元素要解决，就需要调用100次。

  3.使用插件。fastclick插件可以解决300ms延迟。

  该插件的Github官网地址为：https://github.com/ftlabs/fastclick（进入该地址后，点击“lib”文件夹就可以看到fastclick.js文件）。

  具体用法见Github上的详细分析。

---

微信公众号也会定期更新，觉得文章写得还可以的，可以加个关注！点个赞！谢谢！