快捷導(dǎo)航

vue?鼠標(biāo)移入移出(hover)切換顯示圖片問題

更新時(shí)間：2022年10月10日 09:38:09 作者：草字

這篇文章主要介紹了vue?鼠標(biāo)移入移出(hover)切換顯示圖片問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

鼠標(biāo)移入移出(hover)切換顯示圖片

css實(shí)現(xiàn)

代碼：

<div @click="exitConnect()" class="exit_hover">
? ? ? ?<img class="exit1 mr10" :src="exit" style="width:20px;height:20px;" />
? ? ? ?<img class="exit2 mr10" :src="exitActive" style="width:20px;height:20px;" />斷開連接
</div>

css：

.exit_hover .exit1{display:inline-block;}
.exit_hover .exit2{display:none;}
.exit_hover:hover .exit1{display:none;}
.exit_hover:hover .exit2{display:inline-block;}

js實(shí)現(xiàn)

使用一個(gè)變量來表示鼠標(biāo)移入或移出的狀態(tài)，鼠標(biāo)移入事件mouseenter，移出事件mouseleave，在這兩個(gè)事件中來修改這個(gè)變量。

注意：移出事件別用mouseout。

代碼：

<div @mouseenter="isExitHover=true" @mouseleave="isExitHover=false" class="menus">
? ? ? ?<img v-show="!isExitHover" :src="exit" style="width:16px;height:16px;" class="mr10" />
? ? ? ?<img v-show="isExitHover" :src="exitActive" style="width:16px;height:16px;" class="mr10" />斷開連接
</div>

data：

? ? ? ? ? ? exit: require("@/assets/img/exit.svg"),
? ? ? ? ? ? exitActive: require("@/assets/img/exit_active.svg"),
? ? ? ? ? ? isExitHover:false,//是否懸浮到圖標(biāo)上

vue鼠標(biāo)移入移出事件注意事項(xiàng)

發(fā)生冒泡事件

今天在寫一個(gè)鼠標(biāo)的移入移出的事件，使用mouseout和mouseover期間，踩了一個(gè)大坑，經(jīng)過半天的排查，終于發(fā)現(xiàn)是發(fā)生了冒泡事件。

把mouseout和mouseover綁在父元素上，移過父元素和子元素都會(huì)觸發(fā)。即子元素mouseover和mouseout事件會(huì)冒泡至父元素

一、解決方法

使用 mouseenter 和 mouseleave 事件。

這兩個(gè)事件是根據(jù)組件在頁(yè)面上的范圍進(jìn)行計(jì)算的，只要在某個(gè)組件上添加了這兩個(gè)事件，會(huì)計(jì)算鼠標(biāo)的位置，只要在組件范圍內(nèi)，就可以觸發(fā)。

二、定義

1、mouseenter：在鼠標(biāo)光標(biāo)從元素外部首次移動(dòng)到元素范圍之內(nèi)時(shí)觸發(fā)，這個(gè)事件不冒泡。

2、mouseleave：在位于元素上方的鼠標(biāo)光標(biāo)移動(dòng)到元素范圍之外時(shí)觸發(fā)，這個(gè)事件不冒泡。

3、mouseover：在鼠標(biāo)指針位于一個(gè)元素外部，然后用戶將其首次移入另一個(gè)元素邊界之內(nèi)時(shí)觸發(fā)。

4、mouseout：在鼠標(biāo)指針位于一個(gè)元素上方，然后用戶將其移入另一個(gè)元素時(shí)觸發(fā)。又移入的另一個(gè)元素可能位于前一個(gè)元素的外部，也可能是該元素的子元素。

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

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

1、mouseover 和 mouseout

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

不論鼠標(biāo)指針離開被選元素還是任何子元素，都會(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事件，離開范圍，則觸發(fā)mouseleave事件。

總結(jié)一下：