Vue中@click.stop和@click.prevent實例詳解

更新時間：2024年04月02日 08:20:22 作者：千川Maple

當我們使用Vue.js開發(fā)前端應用時,經常會在模版中使用@click指令來響應用戶的點擊事件,這篇文章主要給大家介紹了關于Vue中@click.stop和@click.prevent的相關資料,需要的朋友可以參考下

一、@click.stop（阻止事件冒泡）

@click.stop：阻止事件冒泡，即阻止點擊事件從子組件向父組件傳播。

案例：我們在父元素中添加了一個click事件A，并且在其下的子元素中也添加了一個click事件B。

這時我想點擊子元素觸發(fā)子元素的點擊事件，但實際上會先觸發(fā)子組件的事件，然后觸發(fā)父組件的事件。

<div class='handle-box' @click="clickBox">
		<div @click="handleClick('新增')"><text>新增</text></div>
		<div @click="handleClick('修改')"><text>修改</text></div>
		<div @click="handleClick('刪除')"><text>刪除</text></div>
</div>

需要使用阻止事件冒泡（也即阻止點擊事件繼續(xù)傳播）來解決此問題，

將子組件中的@click改為@click.stop即可：

<div class='handle-box' @click="clickBox">
		<div @click.stop="handleClick('新增')"><text>新增</text></div>
		<div @click.stop="handleClick('修改')"><text>修改</text></div>
		<div @click.stop="handleClick('刪除')"><text>刪除</text></div>
</div>

二、@click.prevent（阻止事件的默認行為）

@click.prevent：阻止事件的默認行為。它會阻止觸發(fā)dom的原始事件，而只執(zhí)行我們自定義的事件。

例如：在代碼里寫入一個<a>標簽，在點擊<a>標簽時，會默認觸發(fā)一次跳轉，跳轉到目標URL：

<div>
	<a  rel="external nofollow"  rel="external nofollow"  target='_blank'>百度</a>
</div>

但如果我們不想讓它跳轉，而是在點擊<a>標簽時執(zhí)行我們的自定義方法，那就需要用到@click.prevent啦！用法如下：

<div>
	<a  rel="external nofollow"  rel="external nofollow"   target='_blank' @click.prevent='handleClick('修改')'>百度</a>
</div>

這時再點擊<a>標簽，就不會跳轉到目標URL啦，而是會執(zhí)行我們自定義的handleClick(‘修改’)事件。

附：Vue @click.stop阻止事件向祖先元素傳遞（事件冒泡）

任何事件都不觸發(fā)

<template>
  <div @click="fun">
    <div @click.stop>
      <!--子div-->
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fun() {
      // 點擊父div時執(zhí)行的功能
      console.log('單擊了父div');
    },
  },
}
</script>

不觸發(fā)父級事件，觸發(fā)屬于自己的事件

<template>
  <div @click="doSomething">
    <button @click.stop="doSomethingElse">不會觸發(fā)父級元素的點擊事件</button>
  </div>
</template>
<script>
export default {
  methods: {
    doSomething() {
      console.log('doSomething')
    },
    doSomethingElse() {
      console.log('doSomethingElse')
    }
  }
}
</script>