Vue事件修饰符和按键修饰符用法总结

今天给大家介绍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>