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

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

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

在Vue模板中，可以使用這兩個(gè)事件來(lái)綁定方法，例如：

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

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

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

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

@mouseleave事件來(lái)代替mouseout事件

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

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

因此在Vue中，建議使用@mouseleave事件來(lái)代替mouseout事件。

@mouseenter事件來(lái)代替mouseover事件

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

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

因此在Vue中，建議使用@mouseenter事件來(lái)代替mouseover事件。

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

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

1、mouseover 和 mouseout

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

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

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

2、mouseenter 和 mouseleave

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

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

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

總結(jié) 

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

最新評(píng)論