触屏事件，事件对象 本地存储 移动端常用插件 点击延时问题
作者：互联网
触屏事件概述
touch 对象代表一个触摸点，触摸事件可响应用户对屏幕或者触控板的操作；
| 触屏touch事件 | 说明 |
|---|---|
touchstart |
手指触摸到DOM元素时触发 |
touchmove |
手指在DOM元素移动时触发 |
touchend |
手指从一个DOM元素离开时触发 |
触摸事件对象
TouchEvent 是一类描述手指在触摸平面的状态变化的事件，这类事件用于描述一个或多个触点。
| 触摸列表 | 说明 |
|---|---|
touches |
正在触摸屏幕的所有手指的一个列表 |
targetTouches |
正在触摸当前DOM元素上的手指的一个列表 （touchstart后存在） |
changedTouches |
手指状态发生了改变的列表，从无到有，从有到无（touchend 后才有） |
过渡结束事件
// 过渡动画结束之后出发该事件
div.addEventListener('transitionend', function () {});
click延时解决方案
click 在移动端会有300ms的延时，原因是移动端浏览器，有屏幕双击缩放（double tap to zoom）的效果
解决方案：
- 禁止缩放
<meta name="viewport" cotnent="user-scalable=no"> - 封装tap函数；原理
touchstart和touchend触发的时候分别记录一个事件，检查是否超过 150ms ；小于判定为点击；
- fastclick 插件解决延时 https://github.com/ftlabs/fastclick
移动端常用 插件
superslide：http://www.superslide2.com/
swiper：https://www.swiper.com.cn/
iscroll：https://github.com/cubiq/iscroll
移动端视频播放插件：https://github.com/ireaderlab/zyMedia
本地存储特性
1，数据存储在浏览器中
2，设置，读取方便，甚至刷新网页不丢失数据
3，容量较大，
sessionStorage约 5MlocalStorage约 20M3，只能存储字符串，可以将对象
JSON.stringify()编码后处理
window.sessionStorage
1，生命周期为浏览器关闭窗口
2，在同一个窗口（页面）下数据可以共享
3，以键值对的形式存在
// 存储数据 sessionStorage.setItem(key, val)
sessionStorage.setItem('uname', val);
// 获取数据 sessionStorage.getItem(key)
sessionStorage.getItem('uname');
// 删除数据 sessionStorage.removeItem(key);
sessionStorage.removeItem('uname');
// 删除所有数据 sessionStorage.clear()
sessionStorage.clear();
window.localStorage
1，声明周期永久有效，除非手动删除，否则关闭页面也会存在
2，可以多窗口（页面）共享数据
3，以键值对进行存储
// 储存数据 localStorage.setItem(key, val);
localStorage.setItem('username', 'admin');
// 获取数据 localStorage.getItem(key);
loclaStorage.getItem('username');
// 删除数据 localStorage.removeItem('username');
localStorage.removeItem('username');
// 删除所有数据 localStorage.clear();
localStorage.clear();
标签：插件,触摸,sessionStorage,localStorage,事件,key,com,触屏 来源： https://www.cnblogs.com/article-record/p/12629843.html