-
1、事件修飾符
- .stop 組織冒泡
- .prevent 組織事件默認(rèn)行為
- .self 僅當(dāng) event.target 是元素本身時(shí)才會(huì)觸發(fā)事件處理器，事件處理器不來自子元素
- .capture 添加事件監(jiān)聽器時(shí)饵溅，使用
capture捕獲模式，指向內(nèi)部元素的事件舶胀，在被內(nèi)部元素處理前概说，先被外部處理 - .once 點(diǎn)擊事件最多被觸發(fā)一次
- .passive 滾動(dòng)事件的默認(rèn)行為 (scrolling) 將立即發(fā)生而非等待
onScroll完成
-
2、按鍵修飾符
- .enter 回車
- .tab tab
- .delete (捕獲“Delete”和“Backspace”兩個(gè)按鍵)
- .esc esc
- .space 空格
- .up 上
- .down 下
- .left 左
- .right 右
- .ctrl ctral鍵
- .alt alt鍵
- .shift shift鍵
- .meta meta 鍵是 Windows 鍵 (?)嚣伐，meta 是鉆石鍵 (◆)
- .exact 修飾符允許控制觸發(fā)一個(gè)事件所需的確定組合的系統(tǒng)按鍵修飾符糖赔。
-
3、鼠標(biāo)按鍵修飾符
- .left 左鍵
- .right 右鍵
- .middle 滾輪
案例
<template>
<div @click="parentclick">
<div @click.stop="subclick">子元素點(diǎn)擊</div>
</div>
<div @click.once="subclick2">子元素點(diǎn)擊2</div>
<br>
<input type="text" @keyup.enter="enterfun">
</template>
<script>
export default {
setup(){
let parentclick = ()=>{
alert(2)
}
let subclick = ()=>{
alert(1);
}
let subclick2 = ()=>{
alert(3);
}
let enterfun = ()=>{
alert('回車')
}
let onClick = ()=>{
alert('任意鍵');
}
return {
onClick,
enterfun,
parentclick,
subclick,
subclick2
}
}
}
</script>
