触屏事件，事件对象 本地存储 移动端常用插件 点击延时问题

触屏事件概述

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 约 5M localStorage 约 20M

3，只能存储字符串，可以将对象 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();