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

news2024/10/5 17:13:01

在这里插入图片描述

本文主要介绍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>