HTML5手势、拖放、定位事件
文章目录
- 1.手势事件（移动端）
-
- 1.1 click事件
- 1.2 tap类事件
- 1.3 swipe类事件
- 1.4 touch类事件
- 2.拖放事件
- 3.定位事件
-
- 3.1 getCurrentPosition()方法
- 3.2 watchPosition()方法
- 3.3 clearWatch()方法
- 3.4 百度地图api获取当前定位
1.手势事件（移动端）
引入：
zepto库，该库与jQuery用法相同。封装了移动端手势
- Zepto.js是专门为现代智能手机浏览器推出的JavaScript框架
- Zepto的一些可选功能专门针对移动浏览器，因为最初的目标是专门为移动网站提供一个精简的jQuery替代方案
移动端事件再使用之前，必须添加移动端优先的设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1.1 click事件
IOS设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，才有了FastClick。
不需要使用fastclick的情况：
- FastClick是不会对PC浏览器添加监听事件
- Android版Chrome 32+浏览器，如果设置viewport meta的值为width=device-width，这种情况下浏览器会马上出发点击事件，不会延迟300毫秒。
- 所有版本的Android Chrome浏览器，如果设置viewport meta的值有user-scalable=no，浏览器也是会马上出发点击事件。
- IE11+浏览器设置了css的属性touch-action: manipulation，它会在某些标签（a，button等）禁止双击事件，IE10的为-ms-touch-action: manipulation
1.2 tap类事件
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插件。
1.3 swipe类事件
滑动事件，有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事件');
});
1.4 touch类事件
触摸事件，有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');
}
2.拖放事件
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 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>
3.定位事件
HTML5 Geolocation API 用于获得用户的地理位置。 Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。该对象主要有三个方法： getCurrentPosition()，watchPosition()，clearWatch()。但是我们要判断浏览器的支持情况。
实例：
if (navigator.geolocation){
// 支持
}else{
// 不支持
console.log("您的浏览器不支持定位")
}
3.1 getCurrentPosition()方法
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默认访问的使用谷歌地图，所以很有可能会出现错误，因为国内访问谷歌地图服务器有 限制。
3.2 watchPosition()方法
如果要跟踪用户的位置，那么可以使用 watchPosition() 方法。这个方法的使用和 getCurrentPosition() 完全 相同。实际上 watchPosition() 与定时调用 getCurrentPosition() 能得到相同效果。在第一次调用 watchPosition() 方法后，会取得当前位置，执行成功回调或者错误回调。然后，watchPosition() 就地等待系统发出位置已改变的 信号。
调用 watchPosition() 会返回一个数值标识符，用于跟踪监控的操作。基于这个返回值可以取消监控操作，只 要将其传递给 clearWatch() 方法即可（与使用 setTimeout() 和 clearTimeout() 类似），例如：
var watchId = navigator.geolocation.watchPosition(success, error);
clearWatch(watchId);
3.3 clearWatch()方法
清除一个跟踪控制监听。需要传入使用watchPosition函数返回的值。
3.4 百度地图api获取当前定位
步骤：
- 进入网站
- 注册并登录
- 在控制台->我的应用中添加一个应用，用于获取ak（密钥）值，注意：百度地图1.4以下的版本不需要ak，1.4以上的版本必须要ak
- 开发（看文档）
- 运行（必须在服务端运行）
附：再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