Vue阻止事件冒泡詳解

在Vue中，我們經常會遇到需要阻止事件冒泡的情況，比如當一個父組件裡面包含多個子組件，點擊子組件時不希望觸發父組件的點擊事件，這時就需要使用到阻止事件冒泡的方法。本文將從多個方面介紹Vue阻止事件冒泡的方法。

一、阻止事件冒泡的方法

1. event.stopPropagation()

當一個組件嵌套在另一個組件中，當你點擊內部組件時，父組件的點擊事件也會被觸發。這時候我們就需要阻止事件冒泡，讓內部組件的點擊事件不再向外傳播。Vue提供了一個方法：event.stopPropagation()。

<template>
  <div class="parent" @click="handleParentClick">
    <div class="child" @click.stop="handleChildClick">子組件</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleParentClick() {
      console.log('我是父組件')
    },
    handleChildClick(event) {
      event.stopPropagation()
      console.log('我是子組件')
    }
  }
}
</script>

上面的代碼中，當點擊子組件時，由於使用了.stop修飾符，所以事件不再繼續向上傳播，只觸發了子組件的點擊事件。

2. event.cancelBubble

除了使用stopPropagation()方法外，還可以使用event對象的cancelBubble屬性，設置為true表示禁止事件冒泡。

<template>
  <div class="parent" @click="handleParentClick">
    <div class="child" @click="handleChildClick">子組件</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleParentClick() {
      console.log('我是父組件')
    },
    handleChildClick(event) {
      event.cancelBubble = true
      console.log('我是子組件')
    }
  }
}
</script>

上面的代碼和第一個例子類似，不同的是，這裡使用了cancelBubble屬性來阻止事件冒泡。

二、Vue阻止事件冒泡的修飾符

Vue提供了一些修飾符來方便我們使用阻止事件冒泡的方法。

1. .stop

stop修飾符可以和@click、@mousedown、@mouseup一起使用，表示阻止事件繼續傳播。

<template>
  <div class="parent" @click="handleParentClick">
    <div class="child" @click.stop="handleChildClick">子組件</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleParentClick() {
      console.log('我是父組件')
    },
    handleChildClick(event) {
      console.log('我是子組件')
    }
  }
}
</script>

上面的代碼中，當點擊子組件時，由於使用了.stop修飾符，所以事件不再繼續向上傳播，只觸發了子組件的點擊事件。

2. .prevent

prevent修飾符可以和@click、@mousedown、@mouseup一起使用，表示阻止默認事件並阻止事件繼續傳播。

<template>
  <div class="parent" @click.prevent="handleParentClick">
    <div class="child" @click.prevent.stop="handleChildClick">子組件</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleParentClick() {
      console.log('我是父組件')
    },
    handleChildClick(event) {
      console.log('我是子組件')
    }
  }
}
</script>

上面的代碼中，當點擊子組件時，由於使用了.prevent.stop修飾符，所以阻止了默認事件並且阻止了事件繼續傳播。

3. .self

self修飾符可以和@click一起使用，表示只有當點擊的是該元素本身時才觸發事件。

<template>
  <div class="parent" @click="handleParentClick">
    <div class="child" @click.self="handleChildClick">子組件</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleParentClick() {
      console.log('我是父組件')
    },
    handleChildClick(event) {
      console.log('我是子組件')
    }
  }
}
</script>

上面的代碼中，當點擊子組件時，由於使用了.self修飾符，所以只有當點擊的是該元素本身時才觸發事件。

三、Vue阻止事件向下傳遞

有時候我們並不需要阻止事件冒泡，而是希望父組件接收到點擊事件，但是子組件不需要再向下傳遞事件。Vue提供了一個修飾符：.capture。

<template>
  <div class="parent" @click.capture="handleParentClick">
    <div class="child" @click="handleChildClick">子組件</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleParentClick() {
      console.log('我是父組件')
    },
    handleChildClick(event) {
      console.log('我是子組件')
    }
  }
}
</script>

上面的代碼中，當點擊子組件時，事件先被捕獲到父組件，父組件的點擊事件被觸發，之後事件繼續向下傳遞，子組件的點擊事件也被觸發。

四、Vue阻止事件捕獲的方法

Vue提供了一個.stop事件修飾符，可以用來阻止事件的捕獲過程。

<template>
  <div class="parent" @click.capture.stop="handleParentClick">
    <div class="child" @click="handleChildClick">子組件</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleParentClick() {
      console.log('我是父組件')
    },
    handleChildClick(event) {
      console.log('我是子組件')
    }
  }
}
</script>

上面的代碼中，當點擊子組件時，事件先被捕獲到父組件，但使用了.stop修飾符後，事件不再向下傳播，只觸發了父組件的點擊事件。

五、Vue阻止冒泡和默認事件

.stop和.prevent同時使用可以同時阻止事件冒泡和默認事件。

<template>
  <a href="https://www.google.com" class="link" @click.prevent.stop="handleClick">Google</a>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('點擊了標籤')
    }
  }
}
</script>

上面的代碼中，當點擊a標籤時，同時阻止了事件冒泡和默認事件（跳轉到google.com），只觸發了click事件。

六、Vue click阻止事件冒泡

除了@click，Vue還提供了一些點擊事件的縮寫：@mousedown、@mouseup、@click。這些事件都可以使用.stop修飾符來防止事件冒泡。

<template>
  <div class="parent" @click="handleParentClick">
    <div class="child" @mousedown.stop="handleChildClick">子組件</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleParentClick() {
      console.log('我是父組件')
    },
    handleChildClick() {
      console.log('我是子組件')
    }
  }
}
</script>

上面的代碼中，當按下子組件時，事件不再繼續向上傳播，只觸發了子組件的mousedown事件。

七、Vue阻止冒泡和捕獲

.stop和.capture同時使用可以同時阻止事件冒泡和事件捕獲。

<template>
  <div class="parent" @click.capture.stop="handleParentClick">
    <div class="child" @click="handleChildClick">子組件</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleParentClick() {
      console.log('我是父組件')
    },
    handleChildClick() {
      console.log('我是子組件')
    }
  }
}
</script>

上面的代碼中，當點擊子組件時，事件先被捕獲到父組件，但是使用了.stop和.capture修飾符後，事件不再向下傳播，只觸發了父組件的點擊事件。

八、Vue阻止冒泡是怎麼實現的

當阻止事件冒泡時，Vue會針對該元素綁定一個事件處理函數，該事件處理函數的作用是：當事件發生後，先執行元素本身的事件處理函數（如@click），然後執行Vue綁定的事件處理函數。Vue會在事件發生時，判斷當前事件是不是由該元素觸發的，如果是，則執行元素本身的事件處理函數，否則執行Vue綁定的事件處理函數。這樣就達到了阻止事件冒泡的效果。

九、Vue點擊事件阻止冒泡

除了使用阻止事件冒泡的方法外，還可以使用@click.stop阻止事件冒泡。

<template>
  <div class="parent" @click="handleParentClick">
    <div class="child" @click.stop="handleChildClick">子組件</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleParentClick() {
      console.log('我是父組件')
    },
    handleChildClick() {
      console.log('我是子組件')
    }
  }
}
</script>

上面的代碼中，當點擊子組件時，事件不再繼續向上傳播，只觸發了子組件的點擊事件。

十、Vue阻止默認事件的指令

除了.prevent修飾符外，Vue還提供了一個指令v-on:submit.prevent，用來阻止表單提交的默認事件。

<template>

<form @submit.prevent="handleSubmit">

<input type="text" v-model="inputValue" />

<button type="submit">提交</button>

</form>

</template>
<script>
export default
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/198385.html