Vue3 事件修饰符种类及作用
- .stop 相当于 event.stopPropagation(),阻止事件冒泡。
- .prevent 相当与event.preventDefault(),阻止事件默认行为。
- .self 仅当事件目标为自己时才会触发事件。
- .capture 可以提前捕获事件。
- .once 表示事件只执行一次。
- .passive 表示不想阻止默认行为,与prevent相反。
- @click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为,使用此修饰符可以防止点击穿透,在遮罩层,loading中使用。
- @click.self.prevent 只会阻止对元素本身的点击事件的默认行为。
- .exact 触发一个事件所需的确定组合的系统按键。通常使用这个修饰符在同一个元素上需要设置不同的事件,或者添加快捷键等。
eg
//一个事件上有多个需要分别触发的事件
// @click.exact 表示仅点击且没有按下其他系统按键时触发click1事件
// @ click.ctrl.exact 表示仅鼠标左键 与 ctrl键 同时按下且没有按下其他系统按键触发click2
<div
@click.exact="click1"
@click.ctrl.exact="click2"
>
</div>
行2 的例子
function checkName(evt) {
var charCode = evt.charCode;
if (charCode != 0) {
if (charCode < 97 || charCode > 122) {
evt.preventDefault();
displayWarning(
"Please use lowercase letters only." +
"\n" +
"charCode: " +
charCode +
"\n",
);
}
}
}
要去吃饭实在没时间了,之后在总结