vue事件修饰符详细使用说明

Vue3 事件修饰符种类及作用

1. .stop 相当于 event.stopPropagation()，阻止事件冒泡。
2. .prevent 相当与event.preventDefault()，阻止事件默认行为。
3. .self 仅当事件目标为自己时才会触发事件。
4. .capture 可以提前捕获事件。
5. .once 表示事件只执行一次。
6. .passive 表示不想阻止默认行为，与prevent相反。
7. @click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为，使用此修饰符可以防止点击穿透，在遮罩层，loading中使用。
8. @click.self.prevent 只会阻止对元素本身的点击事件的默认行为。
9. .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",
      );
    }
  }
}

要去吃饭实在没时间了，之后在总结