在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見(jiàn)的操作。Vue 中提供了事件修飾符枉侧。
1引瀑、.stop
2、.prevent
3榨馁、.capture
4憨栽、.self
5、.once
用法：在＠綁定的事件后加小圓點(diǎn)“．”翼虫，再跟一個(gè)后綴來(lái)使用修飾符屑柔。
<!-- 阻止事件冒泡 -->
<div @click.stop="handle"> clikcMe </div>
<!-- 阻止默認(rèn)行為 -->
<div @click.prevent="handle"> clikcMe </div>
<!-- 使用多個(gè)修飾符 -->
<div @click.stop.prevent="handle"> clikcMe </div>
<!-- 添加事件偵聽(tīng)時(shí)使用事件捕獲模式 -->
<div @click.capture="handle"> clikcMe </div>
<!-- 只當(dāng)事件在該元素本身（而不是子元素） 觸發(fā)時(shí)觸發(fā)回調(diào)，也可以實(shí)現(xiàn)stop效果 -->
<div @click.self="handle"> clikcMe </div>
<!-- 只觸發(fā)一次珍剑，組件同樣適用 -->
<div @click.once=” handle ”> clikcMe </div>
<!-- 鍵盤code使用,當(dāng)按下某個(gè)鍵時(shí)觸發(fā) -->
<input type="text" @keyup.13="submit" />
除了keycode外掸宛，還可以使用快捷鍵名稱，如下：
1次慢、.enter
2旁涤、.tab
3、.delete(刪除和退格鍵)
4迫像、.esc
5劈愚、.space
6、.up
7闻妓、.down
8菌羽、.left
9、.right
按鍵修飾符還可以組合使用由缆，或和鼠標(biāo)一起配合使用：
1注祖、.ctrl
2、.alt
3均唉、.shift
4是晨、.meta （mac是command、window是窗口鍵）
例如：
<!-- shfit + S -->
<input type="text" @keyup.shift.83="handle" />
<!-- ctrl + ctrl -->
<input type="text" @keyup.ctrl="handle" />
案例：
<template>
<div>
<div @click.self="parentClick" style="border:1px solid red;">
<div @click.stop="subClick" style="border:1px solid yellow; width: 50px">點(diǎn)擊</div>
<div @click.stop.prevent="subClick">點(diǎn)擊</div>
</div>
<div @click.once="subClick">只執(zhí)行一次事件</div>
</div>
</template>
<script>
export default {
data(){
return {
}
},
methods: {
parentClick(){
alert('parent click');
},
subClick(){
alert('sub click');
}
}
}
</script>
