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事件類似，但有一些細(xì)微的差別。

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事件類似，但有一些細(xì)微的差別。

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

2、mouseenter 和 mouseleave

只有在鼠標(biāo)指針從元素外穿入被選元素（到元素內(nèi)）時，才會觸發(fā) mouseenter 事件。

只有在鼠標(biāo)指針從元素內(nèi)穿出被選元素（到元素外）時，才會觸發(fā) mouseleave 事件。

mouseenter 和 mouseleave是根據(jù)組件在頁面的范圍(坐標(biāo))進(jìn)行觸發(fā)的。不管組件中是否有子組件，只要鼠標(biāo)進(jìn)入到組件的范圍內(nèi)，就可以觸發(fā)mouseenter事件，離開范圍，則觸發(fā)mouseleave事件。

總結(jié) 

到此這篇關(guān)于Vue中常用的鼠標(biāo)移入移出事件的文章就介紹到這了,更多相關(guān)Vue鼠標(biāo)移入移出事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論