-
1、事件修饰符
- .stop 组织冒泡
- .prevent 组织事件默认行为
- .self 仅当 event.target 是元素本身时才会触发事件处理器，事件处理器不来自子元素
- .capture 添加事件监听器时，使用
capture捕获模式，指向内部元素的事件，在被内部元素处理前，先被外部处理 - .once 点击事件最多被触发一次
- .passive 滚动事件的默认行为 (scrolling) 将立即发生而非等待
onScroll完成
-
2、按键修饰符
- .enter 回车
- .tab tab
- .delete (捕获“Delete”和“Backspace”两个按键)
- .esc esc
- .space 空格
- .up 上
- .down 下
- .left 左
- .right 右
- .ctrl ctral键
- .alt alt键
- .shift shift键
- .meta meta 键是 Windows 键 (⊞)，meta 是钻石键 (◆)
- .exact 修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符。
-
3、鼠标按键修饰符
- .left 左键
- .right 右键
- .middle 滚轮
案例
<template>
<div @click="parentclick">
<div @click.stop="subclick">子元素点击</div>
</div>
<div @click.once="subclick2">子元素点击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>
