1. touch 事件简介
touchmove 事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用 preventDefault() 事件可以阻止滚动；
touchend 事件：在用户从元素上移开手指时会发生。
touchcancel 事件：在触摸事件被中断时发生。不同的设备会在不同的动作中中断触摸事件，如果发生这种“错误”，那么包含此事件来清理代码被认为是一种好习惯。
每个触摸事件被触发后会生成一个 event 对象，event 对象里额外包括以下三个触摸列表
| 名称 | 含义 |
| touches | 当前屏幕上所有触摸点的列表 |
| targetTouches | 当前对象上所有触摸点的列表； |
| changedTouches | 涉及当前(引发)事件的触摸点的列表； |
举例区分触摸事件中的这三个属性：
1. 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。 2. 用第二个手指接触屏幕，此时，touches 有两个元素，每个手指触摸点为一个值。 当两个手指触摸相同元素时，targetTouches 和 touches 的值相同，否则 targetTouches 只有一个值。 changedTouches 此时只有一个值，为第二个手指的触摸点，因为第二个手指是引发事件的原因。 3. 用两个手指同时接触屏幕，此时 changedTouches 有两个值，每一个手指的触摸点都有一个值 4. 手指滑动时，三个值都会发生变化 5. 一个手指离开屏幕，touches 和 targetTouches 中对应的元素会同时移除，而 changedTouches 仍然会存在元素。 6. 手指都离开屏幕之后，touches 和 targetTouches 中将不会再有值，changedTouches 还会有一个值， 此值为最后一个离开屏幕的手指的接触点。
触摸列表里每次触摸由 touch 对象组成（包含触摸信息）主要属性如下：
2. Vue中 使用 touch 事件简单案例
效果：
完整代码：
<template> <div class="test"> <div class="wrap"> 背景区 <div class="animate__animated animate__zoomIn insert" v-if="showDeviceImg">插入图形</div> </div> <div class="drawer" ref="drawer">触摸滑动区域</div> </div> </template> <script> export default { data() { return { showDeviceImg:false, startY: 0, endY:0, }; }, methods: { handleTounchListener() { this.$refs.drawer.addEventListener('touchstart', (event) => { // 获取触摸初始 Y 坐标 console.log(event) this.startY = event.targetTouches[0].pageY; }) this.$refs.drawer.addEventListener('touchmove', (event) => { // 若两个接触点，return if (event.targetTouches.length > 1){ return } this.endY = event.targetTouches[0].pageY; const distance = this.endY - this.startY; // 计算起止位置纵坐标差值 if(distance > 60){ // 向下滑动 this.showDeviceImg = true; }else if(distance < -60){ // 向上滑动 this.showDeviceImg = false; } event.preventDefault(); // 阻止默认滚动 }) this.$refs.drawer.addEventListener('touchend', (event) => { console.log('touchEnd',event.targetTouches) }) this.$refs.drawer.addEventListener('touchcancel', (event) => { console.log('touchCancel', event) }) }, }, mounted() { this.handleTounchListener() }, }; </script> <style lang="stylus" scoped> .test { font-size: 25px; text-align: center; .wrap{ width: 100%; min-height: 10vh; background-color: red; .insert{ width: 100%; height: 30vh; background-color: green; } } .drawer{ width: 100%; height: 100vh; background-color: pink; } } </style>
