vue2.0阻止事件冒泡

<!--picker彈窗-->
<transition name="fade">
    <div class="picker_wrap" v-show="roomSelectShow"  @click="cancelSelect">
        <div class="picker_alert" @click.stop>
            <div class="picker_header ofh">
                <span class="fl" @click="toRoomManagement">編輯</span>
                <span class="fr" @click="confirmRoom">確定</span>
            </div>
            <mt-picker :slots="slots" class="" @change="onValuesChange"></mt-picker>
        </div>
    </div>
</transition>

出現的問題：點擊picker_alert元素也會觸發picker_wrap綁定的click事件

解決辦法：阻止事件冒泡

在picker_alert元素加上@click.stop

事件修飾符

在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在 methods 中輕松實現這點，但更好的方式是：methods 只有純粹的數據邏輯，而不是去處理 DOM 事件細節。

為了解決這個問題， Vue.js 為 v-on 提供了 事件修飾符。通過由點(.)表示的指令后綴來調用修飾符。

• .stop
• .prevent
• .capture
• .self
• .once

<!-- 阻止單擊事件冒泡 -->

<a v-on:click.stop="doThis"></a>

 

<!-- 提交事件不再重載頁面 -->

<form v-on:submit.prevent="onSubmit"></form>

 

<!-- 修飾符可以串聯 -->

<a v-on:click.stop.prevent="doThat"></a>

 

<!-- 只有修飾符 -->

<form v-on:submit.prevent></form>

 

<!-- 添加事件偵聽器時使用事件捕獲模式 -->

<div v-on:click.capture="doThis">...</div>

 

<!-- 只當事件在該元素本身（比如不是子元素）觸發時觸發回調 -->

<div v-on:click.self="doThat">...</div>

 

 

 

 

 

 

 

 

 

使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用 @click.prevent.self 會阻止所有的點擊，而 @click.self.prevent 只會阻止元素上的點擊。