详解Vue3中的鼠标事件mousemove、mouseover和mouseout

在这里插入图片描述

本文主要介绍Vue3中的常见鼠标事件mousemove、mouseover和mouseout。

一、mousemove——鼠标移动事件

鼠标移动事件会在鼠标指针在元素内部移动时触发。通过在模板中绑定@mousemove来监听鼠标移动事件。

具体使用方法如下：

在模板中绑定@mousemove事件，并指定一个方法作为事件处理函数：

<template><div @mousemove="handleMouseMove"></div>
</template>

在Vue实例中定义handleMouseMove方法来处理鼠标移动事件：

<script>
export default {methods: {handleMouseMove(event) {// 处理鼠标移动事件的逻辑console.log("鼠标移动了");},},
};
</script>

在handleMouseMove方法中，可以通过event参数来获取关于鼠标移动事件的信息，例如鼠标的坐标等。

另外，Vue3还提供了@mousemove.stop修饰符，用于阻止事件继续传播。

<template><div @mousemove.stop="handleMouseMove"></div>
</template>

这样，当鼠标在元素内部移动时，只会触发handleMouseMove方法，不会触发父元素的鼠标移动事件。

二、mouseover——鼠标移入事件

mouseover事件是指鼠标指针进入元素时触发的事件。通过在HTML模板中使用v-on指令来绑定mouseover事件。

示例代码如下：

<template><div><div @mouseover="handleMouseOver">鼠标悬停在这里</div></div>
</template><script>
export default {methods: {handleMouseOver() {console.log('鼠标悬停在元素上');}}
}
</script>

在上面的示例中，在div元素上使用了@mouseover指令，将其绑定到一个名为handleMouseOver的方法上。当鼠标悬停在该元素上时，handleMouseOver方法会被调用，并输出一条信息。

需要注意的是，由于Vue 3使用了Composition API，可以将mouse事件与其他响应式数据和方法结合使用。例如，可以在handleMouseOver方法中修改data中的某个值来实现一些交互效果。

<template><div><div @mouseover="handleMouseOver">鼠标悬停在这里</div><p v-if="isHovered">鼠标已经悬停在元素上</p></div>
</template><script>
import { reactive } from 'vue';export default {setup() {const data = reactive({isHovered: false});const handleMouseOver = () => {data.isHovered = true;};return {data,handleMouseOver}}
}
</script>

在上面的示例中，使用了reactive函数将data对象包装成响应式对象，并通过调用handleMouseOver方法来修改isHovered的值。根据isHovered的值，我们可以条件地渲染一个p元素。

这就是Vue 3中使用mouseover事件的基本介绍。

三、mouseout——鼠标移出事件

mouseout事件是鼠标指针从一个元素移出时触发的事件。它通常用于捕捉鼠标移出元素的操作，并执行相应的操作或逻辑。

使用v-on指令来监听mouseout事件。

下面是一个示例：

<template><div @mouseout="handleMouseOut">鼠标移出我时触发事件</div>
</template><script>
export default {methods: {handleMouseOut() {console.log('鼠标移出了元素');// 执行其他操作或逻辑}}
}
</script>

在上面的示例中，当鼠标移出<div>元素时，handleMouseOut方法会被调用，并打印出一条消息。

需要注意的是，mouseout事件是冒泡事件，即其会从触发元素开始向上冒泡到最外层的父元素。如果需要阻止冒泡，可以使用event.stopPropagation()方法。

<template><div @mouseout="handleMouseOutParent"><div @mouseout="handleMouseOutChild">子元素</div></div>
</template><script>
export default {methods: {handleMouseOutChild() {console.log('鼠标移出了子元素');},handleMouseOutParent() {console.log('鼠标移出了父元素');}}
}
</script>