触屏事件
1.触屏事件概述
移动端浏览器兼容性较好，可以不需要考虑JS的兼容性问题，可以放心的使用原生JS书写效果，但是移动端也有自己独特的地方。比如触屏事件（也称触摸事件），Android和IOS都有。
touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触控笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。
常见的触屏事件如下：
2.触摸事件对象（TouchEvent）
TouchEvent是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。
touchstart、touchmove、touchend三个事件都有事件对象。
触摸事件对象重点我们看三个常见对象列表：
一般都是给元素注册触摸事件，所以重点记住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插件的使用
中文官网地址：/
使用方法：
1.引入插件相关文件。（一个css文件，一个js文件）
2.按照规定语法使用。
3.其他移动端常见插件
superslide：/scroll：/cubiq/iscrollzy.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官网地址为：/ftlabs/fastclick（进入该地址后，点击“lib”文件夹就可以看到fastclick.js文件）。
具体用法见Github上的详细分析。
微信公众号也会定期更新，觉得文章写得还可以的，可以加个关注！点个赞！谢谢！
JavaScript——移动端网页特效（包括：触屏事件 移动端常用开发插件 移动端常用开发框架等）
