Vue實現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)

更新時間：2022年10月10日 09:28:02 作者：卡爾特斯

這篇文章主要介紹了Vue實現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue實現(xiàn)Hover功能

mouseover 和 mouseenter 的區(qū)別

mouseover：當鼠標移入元素或其子元素都會觸發(fā)事件，所以有一個重復觸發(fā)，冒泡過程。對應的移除事件是 mouseout
mouseenter:當鼠標移入元素本身（不包含元素的子元素）會觸發(fā)事件，也就是不會冒泡。對應的移除事件是 mouseleave
通過圖片進行分析冒泡情況

hover 事件調(diào)用順序

mouseover -> mouseenter -> mousemove(hover進去之后移動會觸發(fā)) -> mouseout -> mouseleave

案例

案例效果

案例代碼

<template>
  <div
    class="hover-view"
    @mouseover="mouseover"
    @mouseenter="mouseenter"
    @mousemove="mousemove"
    @mouseout="mouseout"
    @mouseleave="mouseleave"
    @mousedown="mousedown"
    @mouseup="mouseup"
  >
  </div>
</template>

<script>
export default {
  methods: {
    // 1、進入元素
    mouseover () {
      console.log('mouseover')
    },
    // 2、進入元素
    mouseenter () {
      console.log('mouseenter')
    },
    // 3、移動
    mousemove () {
      console.log('mousemove')
    },
    // 4、離開元素
    mouseout () {
      console.log('mouseout')
    },
    // 5、離開元素
    mouseleave () {
      console.log('mouseleave')
    },
    // 6、鼠標在元素上 按下
    mousedown () {
      console.log('mousedown')
    },
    // 7、鼠標在元素上 抬起
    mouseup () {
      console.log('mouseup')
    }
  }
}
</script>

<style>
.hover-view {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>

Vue hover的兩個小技巧

第一個小技巧：導航欄的hover效果，一直存在

先使用this.$route.path獲取當前路徑，進行判斷

第二個小技巧：鼠標移入移出效果

hoverIndex不能為0，因為第一個li的索引是0。也不能大于0

當鼠標移入的時候index === hoverIndex，當鼠標移出的時候把hoverIndex設置為-1就可以了

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

您可能感興趣的文章:

Vue獲取DOM的幾種方法總結(jié)
這篇文章主要介紹了Vue獲取DOM的幾種方法總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
webstrom Debug 調(diào)試vue項目的方法步驟
這篇文章主要介紹了webstrom Debug 調(diào)試vue項目的方法步驟，詳細的介紹了兩種調(diào)試vue項目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
vue3在setup中使用mapState解讀
這篇文章主要介紹了vue3在setup中使用mapState方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
解決vue-pdf查看pdf文件及打印亂碼的問題
這篇文章主要介紹了解決vue-pdf查看pdf文件及打印亂碼的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue3?setup中使用$refs的方法詳解
在?Vue?3?中的?Composition?API?中,$refs?并不直接可用于?setup?函數(shù),但是實際工作中確實有需求,那么該如何解決呢,本文為大家整理了兩個方案,希望對大家有所幫助
2023-08-08
vue實現(xiàn)日歷備忘錄功能
這篇文章主要為大家詳細介紹了vue實現(xiàn)日歷備忘錄功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-06-06
利用nodeJS+vue圖片上傳實現(xiàn)更新頭像的過程
Vue是一套構(gòu)建用戶界面的框架,最近工作中遇到了一個需求,需要做一個更新頭像的通能,下面這篇文章主要給大家介紹了關于利用nodeJS+vue圖片上傳的相關資料,需要的朋友可以參考下
2022-04-04
一文了解Vue實例掛載的過程
這篇文章主要給大家介紹了關于Vue實例掛載的過程,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2022-03-03
解決vue 給window添加和移除resize事件遇到的坑
這篇文章主要介紹了解決vue 給window添加和移除resize事件遇到的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue中Vue.extend()的使用及解析
這篇文章主要介紹了Vue中Vue.extend()的使用及解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10