鼠標(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)

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

注意：移出事件別用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ā)生冒泡事件

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

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

一、解決方法

使用 mouseenter 和 mouseleave 事件。

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

二、定義

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

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

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

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

三、兩對鼠標(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)劃到該組件的子組件上時，因?yàn)閠arget改變了，所以就觸發(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é)一下：

在實(shí)際開發(fā)過程中，更多的是針對范圍的操作。如果鼠標(biāo)在某個組件(如div)范圍內(nèi)就觸發(fā)進(jìn)入組件的操作，如果離開這個組件的頁面范圍，就觸發(fā)離開的事件。

所以，一般情況下都不推薦使用mouseover與mouseout 最好使用mouseleave 與 mouseenter

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論