【接地气】真正一口气讲清楚了Vue事件修饰符.once、.prevent、.stop、.capture、.self、.passive、.exac、.native的作用

<template>
  <div class="sg-body">
    <!-- 2.1.4 新增 .once -->
    <h1>.once</h1>
    <a href="#" @click.once="alert"
      >用了“ @click.once”，点击只会执行一次弹窗提示</a
    >
    <hr />
    <h1>.prevent</h1>
    <a href="http://www.shuzhiqiang.com" @click.prevent="alert"
      >用了“@click.prevent”，点击只会弹窗提示，而不会跳转链接到www.shuzhiqiang.com</a
    >
    <hr />
    <!-- .once和.prevent顺序可交换 -->
    <a href="http://www.shuzhiqiang.com" @click.prevent.once="alert"
      >用了“@click.prevent.once”，第一次弹窗提示，第二次及其以后就跳转链接到www.shuzhiqiang.com</a
    >
    <hr />
    <h1>.stop</h1>
    <div class="out" @click="a1">
      a1
      <div class="in red" @click="a2">
        a2
        <div class="in orange" @click="a3">
          a3
          <div class="in yellow" @click="a4">
            a4
            <button @click.stop="a5">
              点击按钮事件不会向外部传播（a5.stop）
            </button>
          </div>
        </div>
      </div>
    </div>
    <hr />
    <h1>.capture</h1>
    <div class="out" @click.capture="a1">
      a1.capture↓
      <div class="in red" @click.capture="a2">
        a2.capture↓
        <div class="in orange" @click.capture="a3">
          a3.capture↓
          <div class="in yellow" @click.capture="a4">
            a4.capture↓
            <button @click="a5">
              点击按钮事件会从外向内传播（如果某个父级元素的click事件不加.capture就会按由内到外顺序最后执行）
            </button>
          </div>
        </div>
      </div>
    </div>
    <hr />
    <h1>.self</h1>
    <div class="out" @click="a1">
      a1←
      <div class="in red" @click="a2">
        a2←
        <div class="in orange" @click.self="a3">
          a3.self
          <div class="in yellow" @click="a4">
            a4←
            <button @click="a5">
              点击按钮事件不会传播给a3.self，只有点击了a3自己才会执行他自己的事件
            </button>
          </div>
        </div>
      </div>
    </div>
    <hr />
    <!-- 2.3.0 新增 .passive -->
    <h1>.passive</h1>
    <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发, 而不会等待 `onScroll` 完成 , 这其中包含 `event.preventDefault()` 的情况 -->
    <div @scroll.passive="scroll" style="height: 100px; overflow-y: auto">
      <h3>
        超长度的文字内容测试只是为了判断字段对应的文字最大长度是否有限制，以防止文字长度过长出现布局混乱，div被撑开，导致页面显示错位，UI破坏，以及其他的报错情况发生。超長度的文字內容測試只是為了判斷字段對應的文字最大長度是否有限制，以防止文字長度過長出現佈局混亂，div被撐開，導致頁面顯示錯位，UI破壞，以及其他的報錯情況發生。Ultra-length
        text content test is only to determine whether the maximum length of the
        text corresponding to the field to determine the length of the text to
        prevent the layout of the chaos, div was distraction, resulting in page
        dislocation, UI damage, and other error occurred.
      </h3>
    </div>
    <hr />
    <!-- 
 为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。
你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
     -->
    <input @keyup.enter="alert" value="按回车键有弹窗" />
    <input
      @keydown.alt.67="$event.target.value = ''"
      value="按下Alt + C清空内容"
      size="30"
    />
    <input
      @keyup.alt.67="$event.target.value = ''"
      value="按下Alt + C并弹起清空内容"
      size="30"
    />
    <hr />
    <button @click.ctrl="alert">只要按住了Ctrl+鼠标单击此处触发弹窗提示</button>
    <!-- 2.5.0 新增 .exact（.excat和.page-down、.click顺序可调换）-->
    <h1>.exac</h1>
    <input
      @keyup.page-down.exact="alert"
      value="当且仅当只按PageDown键才会有弹窗"
      size="40"
    />
    <button @click.ctrl.exact="alert">
      当且仅当只按住Ctrl+鼠标单击此处才能触发弹窗提示
    </button>
    <button @click.left.shift.exact="alert">
      当且仅当只按住Shiftl+鼠标左键此处才能触发弹窗提示
    </button>
    <button @click.ctrl.right.exact="alert">
      当且仅当只按住Ctrl+鼠标右键此处才能触发弹窗提示
    </button>
    <button @click.alt.middle.exact="alert">
      当且仅当只按住Alt+鼠标滑轮此处才能触发弹窗提示
    </button>
    <hr />
  </div>
</template>
<script>
export default {
  methods: {
    a1() {
      console.log("a1");
    },
    a2() {
      console.log("a2");
    },
    a3() {
      console.log("a3");
    },
    a4() {
      console.log("a4");
    },
    a5() {
      console.log("a5");
    },
    alert() {
      alert("触发了点击！");
    },
    scroll() {
      console.log("触发了滚动！");
    },
  },
};
</script>
 <style lang="scss" scoped>
.sg-body {
  > h1 {
    margin-left: 10px;
    border-radius: 88px;
    display: table;
    padding: 5px 10px;
    background: linear-gradient(180deg, #648cff 0%, #4172fa 100%);
    box-shadow: 0 3px 4px 0 rgba(44, 71, 146, 0.32), inset 0 -2px 0 0 #3262e6;
    color: white;
  }
  .out {
    margin: 10px 0;
    display: inline-block;
    box-shadow: 0 10px 30px lightgray;
    box-sizing: border-box;
    border: 1px solid gray;
    padding: 20px;
    .in {
      padding: 20px;
      display: inline-block;
      &.red {
        background: red;
      }
      &.orange {
        background: orange;
      }
      &.yellow {
        background: yellow;
      }
    }
  }
}
</style>