前言：最近一段事件在开发移动端web,遇到了事件比较多，这里搜集了一些资料，来解决困惑。
PC端
mouseleave：指点设备（通常是鼠标）的指针移出某个元素时，会触发 mouseleave 事件。
mouseenter：当定点设备（通常指鼠标）移动到元素上时就会触发 mouseenter 事件
mouseover：当指针设备移动到存在监听器的元素或其子元素的时候，mouseover 事件就会被触发。
mouseout：事件在当指针设备（通常是鼠标）移出了附加侦听器的元素或关闭了它的一个子元素时触发。
异同
| 触发条件 | 是否冒泡 | |
|---|---|---|
| mouseenter | 鼠标指针穿过被选元素 | 否 |
| mouseover | 鼠标指针穿过被选元素或其子元素、孙元素 | 是 |
| mouseleave | 鼠标指针穿过被选元素 | 否 |
| mouseout | 鼠标指针穿过被选元素或其子元素、孙元素 | 是 |
mouseout，mouseover,一般不用，表示鼠标针对子元素。
mouseleave、mouseenter最常用，表示鼠标对本身的事件。不论鼠标指针穿过被选元素或其子元素、孙元素，都会触发mouseover事件
只有鼠标指针穿过被选元素时，才会触发mouseenter事件
执行顺序
mouseover>mouseenter>mouseout>mouseleave
demo
移动端
touchend，touchstart，touchmove事件
touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
touchend事件：当手指从屏幕上离开的时候触发。
touchmove事件：当手指在屏幕上滑动的时候连续地触发。
// 打开F12 切换到移动端开始摸你点触
主要代码
<template>
<div class="dialog" v-show="value">
<div>
<div class="goback" @click.prevent="$emit('input', false)">
<i class="el-icon-close" />关闭
</div>
<div
class="content"
ref="content"
@touchstart="touchStart"
@touchend="touchEnd"
@touchmove="touchMove"
v-if="showid"
>
<TicketDetail :id="showid"></TicketDetail>
<!-- 发票预览插件 -->
</div>
<div class="page">
<span
><i
class="el-icon-caret-left"
title="上一页"
@click="$emit('change', '-')"
></i
></span>
{{ current + 1 }} / {{ total }}
<span
><i
class="el-icon-caret-right"
title="下一页"
@click="$emit('change', '+')"
></i
></span>
</div>
</div>
</div>
</template>
<script>
import TicketDetail from "./TicketDetail";
export default {
components: { TicketDetail },
data() {
return {
direction: null, // 0 往下 1 往上 2向左 3向右
move: {},
moveX: 0,
};
},
props: ["value", "showid", "current", "total"],
watch: {},
mounted() {},
created() {},
computed: {},
methods: {
// 触摸开始
touchStart(e) {
e.preventDefault();
const touch = e.targetTouches[0];
const startPos = {
x: touch.pageX,
y: touch.pageY,
};
this.move.startPos = startPos;
console.log(startPos, "startPos✅");
},
// 触摸结束
touchEnd(e) {
e.preventDefault();
this.$refs.content.style.transform = `translateX(${0}px)`;
// 判断是上下滑动还是左右滑动
const x = Math.abs(this.move.startPos.x - this.move.movePos.x);
const y = Math.abs(this.move.startPos.y - this.move.movePos.y);
// 如果步长小于20，不触发滑动事件
if (x < 60 && y < 60) {
return;
}
if (x > y) {
if (this.move.startPos.x > this.move.movePos.x) {
this.direction = "left"; // 向左
} else {
this.direction = "right"; // 向右
}
} else {
if (this.move.startPos.y > this.move.movePos.y) {
this.direction = "top"; // 往上
} else {
this.direction = "bottom"; // 往下
}
}
const { direction } = this;
if (direction === "left") {
this.$emit("change", "-");
} else if (direction === "right") {
this.$emit("change", "+");
}
console.log(this.direction, "direction✅");
},
// 触摸移动
touchMove(e) {
e.preventDefault();
const touch = e.changedTouches[0];
const movePos = {
x: touch.pageX,
y: touch.pageY,
};
this.move.movePos = movePos;
this.moveX = this.move.movePos.x - this.move.startPos.x;
this.$refs.content.style.transform = `translateX(${this.moveX}px)`;
// console.log(movePos, "movePos✅");
},
},
};
</script>
<style lang="scss" scoped>
// .content X轴偏移 20px
.dialog {
position: absolute;
left: 0;
top: 0;
background-color: #fff;
color: #26b2f3;
z-index: 9999;
height: 100vh;
width: 100vw;
overflow-y: auto;
.goback {
position: absolute;
top: 10px;
right: 10px;
color: #26b2f3;
font-size: 20px;
cursor: pointer;
z-index: 9999;
}
.page {
font-size: 20px;
font-weight: bold;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
color: #26b2f3;
display: flex;
align-items: center;
span {
font-size: 40px;
}
}
}
</style>
