Vue-事件修饰符的使用详解

事件修饰符

.stop

• .stop 阻止事件冒泡

  <div :class="box" @click="boxClick">
      <div :class="section" @click="sectionClick">
          <input type="button" name="" :value="msg" @click.stop="btnClick">
      </div>
  </div>
  

.prevent

• 阻止默认事件（如：链接跳转、表单提交。。。）

  <a href="http://www.baidu.com" v-text="msg2" @click.prevent="consoleInfo" >点击后不会跳转到链接地址</a>
  

.capture

• 添加事件侦听器时使用事件捕获模式（执行事件捕获阶段，由外向内触发事件）

  <div :class="box" @click.capture="boxClick">
      <div :class="section" @click.capture="sectionClick">
          <button name="" @click="btnClick">点击该按钮后会由外到内触发事件</button>
      </div>
  </div>
  

.self

• 只有当事件在该元素本身触发时才会执行事件（触发回调），可阻止自身的冒泡或捕获阶段。

  <div :class="box" @click="boxClick">
      <div :class="section" @click.self="sectionClick">
          <button name="" @click="btnClick">点击不会触发父级元素的事件</button>
      </div>
  </div>
  

.once

• 事件只触发一次

  <!-- 只阻止一次默认事件，只调用一次事件处理函数 -->
  <a name="" @click.prevent.once="btnClick" href="http://www.baidu.com">超链接</a>