本文共 6000 字，大约阅读时间需要 20 分钟。
引入：
zepto库，该库与jQuery用法相同。封装了移动端手势
- Zepto.js是专门为现代智能手机浏览器推出的JavaScript框架
- Zepto的一些可选功能专门针对移动浏览器，因为最初的目标是专门为移动网站提供一个精简的jQuery替代方案
移动端事件再使用之前，必须添加移动端优先的设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0">IOS设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，才有了FastClick。
不需要使用fastclick的情况：
tap事件需要引入zepto库，该库与jQuery用法相同。
触碰事件**，一般用于移动端代替click事件**，有tap longTap singleTap doubleTap四种之分tap 事件在用户轻击 一个元素时触发。
| 事件名 | 解释 |
|---|---|
| tap | 手指碰一下屏幕会触发 |
| longTap | 手指长按屏幕会触发 |
| singleTap | 手指碰一下屏幕会触发 |
| doubleTap | 手指双击屏幕会触发 |
注意：
1）如果要使用zepto.js时，有些api单独放在其它js模块中，使用时需要引入这些模块，然后才能调用对应的方法。
2）如果要使用zepto.js中的tap事件，需要引入touch.js描件。
3）tap事件在PC端使用时是无效的，只能在移动端使用。
4）如果要使用常规事件，如click事件等，需要引入event.js插件。
滑动事件，有swipe swipeLeft swipeRight swipeUp swipeDown 五种之分。
| 事件名 | 解释 |
|---|---|
| swipe | 手指在屏幕上滑动时会触发 |
| swipeLeft | 手指在屏幕上向左滑动时会触发 |
| swipeRight | 手指在屏幕上向右滑动时会触发 |
| swipeUp | 手指在屏幕上向上滑动时会触发 |
| swipeDown | 手指在屏幕上向下滑动时会触发 |
<script src="js/zepto.js"></script><script src="js/event.js"></script><script src="js/touch.js"></script><script> $(document).swipe(function () { console.log('我是swipe事件'); }); $(document).swipeLeft(function () { console.log('我是swipeLeft事件'); }); $(document).swipeRight(function () { console.log('我是swipeRight事件'); }); $(document).swipeUp(function () { console.log('我是swipeUp事件'); }); $(document).swipeDown(function () { console.log('我是swipeDown事件'); });触摸事件，有touchstart touchmove touchend touchcancel 四种之分。
这时Js原生为我们提供的事件，因此我们不需要依赖任何库。
| 事件名 | 解释 |
|---|---|
| touchstart | 手指触摸到屏幕会触发 |
| touchmove | 当手指在屏幕上移动时，会触发 |
| touchend | 当手指离开屏幕时，会触发 |
| touchcancel | 可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了 touch的行为，则可以触发该事件 |
document.body.ontouchstart=function(){ console.log('ontouchstart'); } document.body.ontouchmove=function(){ alert(); console.log('ontouchmove'); } document.body.ontouchend=function(){ console.log('ontouchend'); } document.body.ontouchcancel=function(){ console.log('ontouchcancel'); }拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都 能够拖放。
设置元素可以被拖动，必须现在元素上添加属性draggable，否则拖动无效。
| 事件 | 说明 | 作用位置 |
|---|---|---|
| ondragstart | 当拖拽元素开始被拖拽的时候触发的事件 | 被拖曳元素上 |
| ondragenter | 当拖曳元素进入目标元素的时候触发的事件 | 目标元素上 |
| ondragover | 拖拽元素在目标元素上移动的时候触发的事件 | 目标元素上 |
| ondrop | 被拖拽的元素在目标元素上同时鼠标放开触发的事件 | 目标元素上 |
| ondragend | 当拖拽完成后触发的事件 | 被拖曳元素上 |
注意：
事件对象中包含DataTransfer对象，它是用来拖拽对象用来传递的媒介，使用一般为Event.dataTransfer 。
Event.effectAllowed 属性：就是拖拽的效果。
Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中千万一定要执行 preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤 其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用 document的ondragover事件把它直接干掉 。
实例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ overflow: hidden; } .box1,.box2{ float: left; width: 300px; height: 400px; border: 1px solid black; } #img{ width: 100%; } </style></head><body> <div class="box"> <div class="box1"> <img id="img" draggable="true" src="img/tu.jpg"> </div> <div class="box2"></div> </div></body><script> var box1=document.querySelector('.box1'); var box2=document.querySelector('.box2'); var img=document.querySelector('#img'); img.ondragstart=function(e){ console.log(e.dataTransfer); e.dataTransfer.setData('tt',e.target.id); } box2.ondragover=function(e){ e.preventDefault(); } box2.ondrop=function(e){ this.appendChild(document.getElementById(e.dataTransfer.getData('tt'))); } box1.ondragover=function(e){ e.preventDefault(); } box1.ondrop=function(e){ this.appendChild(document.getElementById(e.dataTransfer.getData('tt'))); }</script></html>HTML5 Geolocation API 用于获得用户的地理位置。 Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。该对象主要有三个方法： getCurrentPosition()，watchPosition()，clearWatch()。但是我们要判断浏览器的支持情况。
实例：
if (navigator.geolocation){ // 支持}else{ // 不支持 console.log("您的浏览器不支持定位")}getCurrentPosition()方法 可以传递三个参数。调用这个方法就会触发请求用户共享地理定位信息的对话框 。 这个方法接收三个具体的参数分别是成功的回调函数，失败回调函数，以及配置选项。
getCurrentPosition方法参数说明
| 参数 | 说明 | 是否必须 |
|---|---|---|
| successFn( position ) | 成功回调函数 ,成功的回调函数会返回一个位置数据对象 | 是 |
| errorFn(msg) | 失败回调函数 ，返回一个msg对象包含错误信息和代码 | 否 |
| option | 配置选项对象 | 否 |
实例：
if (navigator.geolocation) { console.log('支持定位'); navigator.geolocation.getCurrentPosition(succeed); function succeed(params) { console.log(params.coords.latitude); console.log(params.coords.longitude); } } else { console.log('不支持定位'); }注意：因为我们的这个API默认访问的使用谷歌地图，所以很有可能会出现错误，因为国内访问谷歌地图服务器有 限制。
如果要跟踪用户的位置，那么可以使用 watchPosition() 方法。这个方法的使用和 getCurrentPosition() 完全 相同。实际上 watchPosition() 与定时调用 getCurrentPosition() 能得到相同效果。在第一次调用 watchPosition() 方法后，会取得当前位置，执行成功回调或者错误回调。然后，watchPosition() 就地等待系统发出位置已改变的 信号。
调用 watchPosition() 会返回一个数值标识符，用于跟踪监控的操作。基于这个返回值可以取消监控操作，只 要将其传递给 clearWatch() 方法即可（与使用 setTimeout() 和 clearTimeout() 类似），例如：
var watchId = navigator.geolocation.watchPosition(success, error);clearWatch(watchId);清除一个跟踪控制监听。需要传入使用watchPosition函数返回的值。
步骤：
附：再Vscode中可以使用Live Server和http-server（需要安装Node）开启服务
i)安装node.js
ii)在VS Code中打开终端，安装http-server（用来启动服务）
npm i http-server -g
iii)用http-server启动服务
http-server
或：
http-server -p 81
iv)在浏览器地址栏输入网址：http://127.0.0.1:81
转载地址：http://lymf.baihongyu.com/