欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年10月10日 09:28:02   作者：卡爾特斯  
這篇文章主要介紹了Vue實(shí)現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue實(shí)現(xiàn)Hover功能

mouseover 和 mouseenter 的區(qū)別

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

image.png

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

mouseover -> mouseenter -> mousemove(hover進(jìn)去之后移動(dòng)會(huì)觸發(fā)) -> mouseout -> mouseleave

案例

案例效果

temp.gif

案例代碼

<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、進(jìn)入元素
    mouseover () {
      console.log('mouseover')
    },
    // 2、進(jìn)入元素
    mouseenter () {
      console.log('mouseenter')
    },
    // 3、移動(dòng)
    mousemove () {
      console.log('mousemove')
    },
    // 4、離開元素
    mouseout () {
      console.log('mouseout')
    },
    // 5、離開元素
    mouseleave () {
      console.log('mouseleave')
    },
    // 6、鼠標(biāo)在元素上 按下
    mousedown () {
      console.log('mousedown')
    },
    // 7、鼠標(biāo)在元素上 抬起
    mouseup () {
      console.log('mouseup')
    }
  }
}
</script>

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

Vue hover的兩個(gè)小技巧

第一個(gè)小技巧：導(dǎo)航欄的hover效果，一直存在

先使用this.$route.path獲取當(dāng)前路徑，進(jìn)行判斷

第二個(gè)小技巧：鼠標(biāo)移入移出效果

hoverIndex不能為0，因?yàn)榈谝粋€(gè)li的索引是0。也不能大于0

當(dāng)鼠標(biāo)移入的時(shí)候index === hoverIndex，當(dāng)鼠標(biāo)移出的時(shí)候把hoverIndex設(shè)置為-1就可以了

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

相關(guān)文章

最新評(píng)論