vue阻止事件冒泡和捕獲方式

更新時(shí)間：2025年06月05日 09:26:40 作者：yujkss

這篇文章主要介紹了vue阻止事件冒泡和捕獲方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

1、js 事件的三階段

捕獲階段

目標(biāo)階段:執(zhí)行當(dāng)前對(duì)象的事件處理程序

冒泡階段

2、js 阻止事件冒泡，捕獲

@click.stop : 阻止事件冒泡
@click.prevent : 阻止事件默認(rèn)行為
@click.self : 事件只作用在元素本身，而不是其子元素

<a @click.stop="doThis">阻止單擊事件繼續(xù)傳播</a>
<form @submit.prevent="onSubmit">提交事件不再重載頁(yè)面</form>
<a @click.stop.prevent="doThat">修飾符可以串聯(lián)</a>
<div @click.self="doThat">只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù).即事件不是從內(nèi)部元素觸發(fā)的</div>

補(bǔ)充其他修飾符

@click.capture : 使用事件捕獲模式
@click.once : 事件只觸發(fā)一次 2.1.4新增
@scroll.passive : 告訴瀏覽器這個(gè)事件的默認(rèn)行為不會(huì)被取消 2.3.0新增
@keyup.enter : 按鍵修飾符，enter被按下的時(shí)候觸發(fā)
@click.ctrl : 系統(tǒng)修飾符，Ctrl 被按下的時(shí)候觸發(fā) 2.1.0新增
@click.ctrl.exact : 有且只有 Ctrl 被按下的時(shí)候才觸發(fā) 2.5.0新增

<div @click.capture="doThis">添加事件監(jiān)聽器時(shí)使用事件捕獲模式，即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進(jìn)行處理</div>
<a @click.once="doThis">點(diǎn)擊事件將只會(huì)觸發(fā)一次</a>
<div @scroll.passive="onScroll">scroll事件不會(huì)取消默認(rèn)的滾動(dòng)行為</div>
<input @keyup.13="submit" placeholder="只有在 keyCode 是 13 時(shí)調(diào)用 vm.submit()">
<button @click.ctrl="onClick">即使 Alt 或 Shift 被一同按下時(shí)也會(huì)觸發(fā)</button>
<button @click.ctrl.exact="onCtrlClick">有且只有 Ctrl 被按下的時(shí)候才觸發(fā)</button>
<button @click.exact="onClick">沒(méi)有任何系統(tǒng)修飾符被按下的時(shí)候才觸發(fā)</button>

使用修飾符時(shí)，順序很重要，相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。

例如：用 @click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而@click.self.prevent 只會(huì)阻止元素上的點(diǎn)擊。

3、JavaScript基礎(chǔ)知識(shí)：preventDefault和stopPropagation

preventDefault()事件方法

【定義】：如果事件是可取消的，則 preventDefault() 方法會(huì)取消該事件，這意味著屬于該事件的默認(rèn)操作將不會(huì)發(fā)生。

單擊“提交”按鈕，阻止其提交表

<form action="https://www.baidu.com/"  method="post">
     <input type="submit" value="登錄">
</form>

<script>
        console.log(document.forms[0]);
        document.forms[0].onsubmit =  function(){
            console.log(event);
            console.log(event.cancelable);//檢測(cè)事件是否可以取消--> Boolean
            event.preventDefault();//阻止默認(rèn)事件  單
            //return false; // 也可以阻止默認(rèn)事件
           
        }
</script>

單擊鏈接，防止鏈接跟隨 URL

<a  rel="external nofollow"  id="a">點(diǎn)我跳轉(zhuǎn)</a>

<script>
		let a = document.getElementById('a');
        a.onclick = function(){
            console.log(event);
            console.log(event.cancelable);//檢測(cè)事件是否可以取消 -->Boolean
            event.preventDefault();//阻止默認(rèn)事件
            //return false; // 也可以阻止默認(rèn)事件
        }
</script>

非所有活動(dòng)都可以取消。請(qǐng)使用 cancelable 屬性來(lái)確定事件是否可取消。

如上面兩個(gè)示例中，其返回值為Boolean，可以取消–>true,否則為–>false

【注】preventDefault() 方法不會(huì)阻止事件通過(guò) DOM 進(jìn)一步傳播。請(qǐng)使用 stopPropagation() 方法來(lái)解決

stopPropagation()事件方法

stopPropagation() 方法防止調(diào)用相同事件的傳播

【傳播階段】傳播意味著向上冒泡到父元素或向下捕獲到子元素或元素目標(biāo)本體三個(gè)3?? 階段

【注】添加事件（HTML屬性事件，JavaScript元素事件，addEventLisenter，attachEvent（IE））默認(rèn)都是冒泡，捕獲需要**addEventLisenter()**顯式的指定第三個(gè)參數(shù)為true（事件捕獲）

//樣式
<style>
        div {
            padding: 50px;
            background-color: rgba(255, 0, 0, 0.2);
            text-align: center;
            cursor: pointer;
        }
</style>

//HTML
	<p>Click DIV 1:</p>
    <div onclick="func2()">DIV 2
        <div onclick="func1(event)">DIV 1</div>
    </div>
    
//script
<script>
        function func1(event) {
            alert("DIV 1");
            event.stopPropagation();//阻止事件傳播
        }

        function func2() {
            alert("DIV 2");
        }
</script>

不阻止事件傳播的話，當(dāng)點(diǎn)擊DIV2時(shí)，事件會(huì)繼續(xù)向上傳播，觸發(fā)父元素DIV1上的func2(),然后會(huì)繼續(xù)向上傳播，直到window對(duì)象