Vue中常用的鼠标移入移出事件详解

Vue中常用的鼠标移入移出事件

Vue中常用的鼠标移入移出事件有两种：@mouseenter和@mouseleave。

@mouseenter事件会在鼠标移入元素时触发，而@mouseleave事件会在鼠标移出元素时触发。这两个事件可以用于实现一些交互效果，例如鼠标移入时显示某些内容，鼠标移出时隐藏。

在Vue模板中，可以使用这两个事件来绑定方法，例如：

<template>
  <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">鼠标移入移出</div>
</template>

在Vue组件的methods中定义对应的方法：

export default {
  methods: {
    handleMouseEnter() {
      console.log('鼠标移入');
    },
    handleMouseLeave() {
      console.log('鼠标移出');
    }
  }
}

这样当鼠标移入或移出该元素时，对应的方法就会被调用。

@mouseleave事件来代替mouseout事件

mouseout是JavaScript原生的鼠标移出事件，与Vue中的@mouseleave事件类似，但有一些细微的差别。

mouseout事件会在鼠标移出元素时触发，但如果鼠标移入该元素的子元素，也会触发一次mouseout事件。这样可能会导致一些意外的行为，例如当鼠标从元素上移入其子元素时，可能会触发元素的mouseout事件，从而导致一些不必要的操作。

因此在Vue中，建议使用@mouseleave事件来代替mouseout事件。

@mouseenter事件来代替mouseover事件

mouseover是JavaScript原生的鼠标移入事件，与Vue中的@mouseenter事件类似，但有一些细微的差别。

mouseover事件会在鼠标移入元素时触发，但如果鼠标移入该元素的子元素，不会触发一次mouseover事件。这样可以避免一些意外的行为，例如当鼠标从元素的子元素上移出时，不会触发元素的mouseover事件，从而避免一些不必要的操作。

因此在Vue中，建议使用@mouseenter事件来代替mouseover事件。

附：两对鼠标事件的区别

其中，mouseover触发优先级高于mouseenter，mouseout触发优先级高于mouseleave

1、mouseover 和 mouseout

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover

不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

是根据鼠标事件的target进行触发的，是一种精确触发。当为某一组件(如div)设置这两个事件时，当事件的target是该组件时，就会触发mouseover，但是当鼠标划到该组件的子组件上时，因为target改变了，所以就触发了 mouseout 事件，这往往就会造成页面元素的闪烁，反复触发移入移出事件。

2、mouseenter 和 mouseleave

只有在鼠标指针从元素外穿入被选元素（到元素内）时，才会触发 mouseenter 事件。

只有在鼠标指针从元素内穿出被选元素（到元素外）时，才会触发 mouseleave 事件。

mouseenter 和 mouseleave是根据组件在页面的范围(坐标)进行触发的。不管组件中是否有子组件，只要鼠标进入到组件的范围内，就可以触发mouseenter事件，离开范围，则触发mouseleave事件。

总结 

到此这篇关于Vue中常用的鼠标移入移出事件的文章就介绍到这了,更多相关Vue鼠标移入移出事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！