今天给大家介绍Vue的事件修饰符、按键修饰符 、 鼠标修饰符!
事件修饰符
stop 阻止事件继续传播
<div @click.stop="handleClick">hello word</div>
prevent 阻止标签默认行为
<div @click.prevent="handleClick">hello word</div>
capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理
<div @click.capture="handleClick">hello word</div>
self 只当在 event.target 是当前元素自身时触发处理函数
<div @click.self="handleClick">hello word</div>
once 事件将只会触发一次
<div @click.once="handleClick">hello word</div>
passive 告诉浏览器你不想阻止事件的默认行为
<div @click.passive="handleClick">hello word</div>
按键修饰符
enter 回车键触发
<input @keydown.passive="handleClick">hello word</input>
tab tab键触发
<input @keydown.tab="handleClick">hello word</input>
delete 删除键触发
<input @keydown.delete="handleClick">hello word</input>
esc 返回键触发
<input @keydown.esc="handleClick">hello word</input>
up 上键触发
<input @keydown.up="handleClick">hello word</input>
down 下键触发
<input @keydown.down="handleClick">hello word</input>
left 左键触发
<input @keydown.left="handleClick">hello word</input>
right 右键触发
<input @keydown.right="handleClick">hello word</input>
鼠标修饰符
right 鼠标右键触发
<div @keydown.right="handleClick">hello word</div>
left 鼠标左键触发
<div @keydown.left="handleClick">hello word</div>
middle 中间键触发
<div @keydown.middle="handleClick">hello word</div>