文章目录
- touch事件
- touch事件分类
- 代码演示
- 页面效果
-
- 点击红色区域未移动
- 点击红色区域，移动到红色区域抬起
- 点击红色区域，移动到红色区域外抬起
- 在红色区域外点击，移动到红色区域抬起
- 在红色区域外点击，穿过红色区域移动到红色区域外抬起
- event对象
-
- 控制台打印event对象
- 控制台打印changedTouches对象
- 扩展
-
- HAMMER.JS
touch事件
touch事件是移动端特有的，由于移动端设备大都具备触摸功能，所以移动端浏览器都引入了触摸 touch事件。 touch相关的事件跟普通的其他dom事件一样使用，可以直接用addEventListener来监听和处理。
touch事件分类
- touchstart：手指开始触碰时触发；
- touchmove：手指滑动时触发；
- touchend：手指移开时触发；
- touchcancel ：中断时触发；
touchcancel 不常用， 当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作。一般会在touchcancel时暂停游戏、存档等操作。
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动端事件</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="div"></div>
<script>
const divEl = document.getElementById('div');
// false 代表不捕获，即冒泡
divEl.addEventListener('touchstart', handStart, false);
divEl.addEventListener('touchmove', handMove, false);
divEl.addEventListener('touchend', handEnd, false);
function handStart (){
console.log('handStart');
}
function handMove (){
console.log('handMove');
}
function handEnd (){
console.log('handEnd');
}
</script>
</body>
</html>
页面效果
点击红色区域未移动
点击红色区域未移动时，触发touchstart、 touchmove事件；
点击红色区域，移动到红色区域抬起
点击红色区域，移动到红色区域抬起时，触发touchstart、 touchmove、touchend事件；
点击红色区域，移动到红色区域外抬起
点击红色区域，移动到红色区域外抬起时，触发touchstart、 touchmove、touchend事件；
在红色区域外点击，移动到红色区域抬起
在红色区域外点击，移动到红色区域抬起时，没有触发任何事件;
在红色区域外点击，穿过红色区域移动到红色区域外抬起
在红色区域外点击，穿过红色区域移动到红色区域外抬起时，没有触发任何事件;
event对象
event 对象代表事件的状态，当某个事件被触发时，会自动产生一个用来描述事件所有的相关信息。
function handStart (e){
console.log('handStart', e, e.changedTouches[0]);
}
控制台打印event对象
TouchEvent {isTrusted: true, touches: TouchList, targetTouches: TouchList, changedTouches: TouchList, altKey: false, …}
altKey: false
bubbles: true //***************冒泡*******************
cancelBubble: false
cancelable: true
changedTouches: TouchList //********************触摸事件列表，是一个类数组*******************
0: Touch {identifier: 0, target: div#div, screenX: 384, screenY: 296, clientX: 130.5263214111328, …} //**********************下标从0开始***********************
length: 1 //*****************长度为1，发生变化触摸点（手指）的个数**************************
__proto__: TouchList
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 0
eventPhase: 0
isTrusted: true
metaKey: false
path: (5) [div#div, body, html, document, Window]
returnValue: true
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: true}
srcElement: div#div
target: div#div //********************触发事件的DOM元素****************************
targetTouches: TouchList
0: Touch {identifier: 0, target: div#div, screenX: 384, screenY: 296, clientX: 130.5263214111328, …}
length: 1 //******************目标（红色区域）上触摸点（手指）的个数**********************
__proto__: TouchList
timeStamp: 948.7999999523163
touches: TouchList
0: Touch {identifier: 0, target: div#div, screenX: 384, screenY: 296, clientX: 130.5263214111328, …}
length: 1 //************************全部（整个屏幕）触摸点（手指）的个数******************************
__proto__: TouchList
type: "touchstart" //*******************当前响应的事件处理函数***************************
view: Window {window: Window, self: Window, document: document, name: "", location: Location, …}
which: 0
__proto__: TouchEvent
- touches 全部（整个屏幕）触摸点（手指）的个数；
- targetTouches 目标（红色区域）上触摸点（手指）的个数；
- changedTouches 发生变化触摸点（手指）的个数；
控制台打印changedTouches对象
Touch {identifier: 0, target: div#div, screenX: 278.3999938964844, screenY: 280.8000183105469, clientX: 146.7368621826172, …}
clientX: 146.7368621826172 //*******可视区距离左上顶点的横向距离（不含滚动条）********
clientY: 117.68424224853516 //*******可视区距离左上顶点的纵向距离（不含滚动条）********
force: 1
identifier: 0
pageX: 146.7368621826172 //*******页面距离左上顶点的横向距离（含滚动条）********
pageY: 117.68424224853516 //*******页面距离左上顶点的纵向距离（含滚动条）********
radiusX: 12.105263710021973
radiusY: 12.105263710021973
rotationAngle: 0
screenX: 278.3999938964844
screenY: 280.8000183105469
target: div#div
__proto__: Touch
- clientX、clientY是从可视区左上角开始算；
- pageX、pageY是从页面左上角开始算，包括通过滚轴滚动的部分；
- screenX、screenY触摸点在屏幕中的x，y坐标；
扩展
HAMMER.JS
hammer.js是一个移动端脚本框架，它实现了移动端开发的大多数事件（如：点击、滑动、拖动、多点触控等），避免了我们自己使用touch事件进行封装。