快捷導(dǎo)航

Vue中常用的鼠標(biāo)移入移出事件詳解

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

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

Vue中常用的鼠標(biāo)移入移出事件

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

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

在Vue模板中，可以使用這兩個事件來綁定方法，例如：

<template>
  <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">鼠標(biāo)移入移出</div>
</template>

在Vue組件的methods中定義對應(yīng)的方法：

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

這樣當(dāng)鼠標(biāo)移入或移出該元素時，對應(yīng)的方法就會被調(diào)用。

@mouseleave事件來代替mouseout事件

mouseout是JavaScript原生的鼠標(biāo)移出事件，與Vue中的@mouseleave事件類似，但有一些細微的差別。

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

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

@mouseenter事件來代替mouseover事件

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

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

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

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

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

1、mouseover 和 mouseout

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

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

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