Vue中常用的鼠標移入移出事件詳解

更新時間：2023年07月03日 15:43:28 作者：愛搗鼓的XiaoPu

這篇文章主要給大家介紹了關于Vue中常用的鼠標移入移出事件的相關資料,鼠標移入移出事件在 Vue 中可以通過@mouseenter和@mouseleave來綁定,需要的朋友可以參考下

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

Vue中常用的鼠標移入移出事件有兩種：@mouseenter和@mouseleave。

@mouseenter事件會在鼠標移入元素時觸發(fā)，而@mouseleave事件會在鼠標移出元素時觸發(fā)。這兩個事件可以用于實現一些交互效果，例如鼠標移入時顯示某些內容，鼠標移出時隱藏。

在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事件會在鼠標移出元素時觸發(fā)，但如果鼠標移入該元素的子元素，也會觸發(fā)一次mouseout事件。這樣可能會導致一些意外的行為，例如當鼠標從元素上移入其子元素時，可能會觸發(fā)元素的mouseout事件，從而導致一些不必要的操作。

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

@mouseenter事件來代替mouseover事件

mouseover是JavaScript原生的鼠標移入事件，與Vue中的@mouseenter事件類似，但有一些細微的差別。

mouseover事件會在鼠標移入元素時觸發(fā)，但如果鼠標移入該元素的子元素，不會觸發(fā)一次mouseover事件。這樣可以避免一些意外的行為，例如當鼠標從元素的子元素上移出時，不會觸發(fā)元素的mouseover事件，從而避免一些不必要的操作。

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

附：兩對鼠標事件的區(qū)別

其中，mouseover觸發(fā)優(yōu)先級高于mouseenter，mouseout觸發(fā)優(yōu)先級高于mouseleave

1、mouseover 和 mouseout

不論鼠標指針穿過被選元素或其子元素，都會觸發(fā) mouseover

不論鼠標指針離開被選元素還是任何子元素，都會觸發(fā) mouseout 事件。

是根據鼠標事件的target進行觸發(fā)的，是一種精確觸發(fā)。當為某一組件(如div)設置這兩個事件時，當事件的target是該組件時，就會觸發(fā)mouseover，但是當鼠標劃到該組件的子組件上時，因為target改變了，所以就觸發(fā)了 mouseout 事件，這往往就會造成頁面元素的閃爍，反復觸發(fā)移入移出事件。