快捷導(dǎo)航

Vue中@click.stop和@click.prevent實(shí)例詳解

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

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

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

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

案例：我們?cè)诟冈刂刑砑恿艘粋€(gè)click事件A，并且在其下的子元素中也添加了一個(gè)click事件B。

這時(shí)我想點(diǎn)擊子元素觸發(fā)子元素的點(diǎn)擊事件，但實(shí)際上會(huì)先觸發(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>

需要使用阻止事件冒泡（也即阻止點(diǎn)擊事件繼續(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（阻止事件的默認(rèn)行為）

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

例如：在代碼里寫入一個(gè)<a>標(biāo)簽，在點(diǎn)擊<a>標(biāo)簽時(shí)，會(huì)默認(rèn)觸發(fā)一次跳轉(zhuǎn)，跳轉(zhuǎn)到目標(biāo)URL：

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

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

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

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

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

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

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

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

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

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

總結(jié)

到此這篇關(guān)于Vue中@click.stop和@click.prevent詳解的文章就介紹到這了,更多相關(guān)Vue中@click.stop和@click.prevent內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: