vue事件修饰符详解

事件修饰符

Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

• .stop

  stop 等同于JavaScript中的event.stopPropagation()，防止事件冒泡 阻止单击事件继续传

• <div @click="log('我是外层div')" style="width: 100px;height: 100px;background: red">
      <div @click.stop="log('我是内层div')" style="width: 50px;height: 50px;background: lightblue"></div>
  </div>
  
  log (str) {
      console.log(str)
  },

如果不加.stop点击内层div会发生事件冒泡，就会输出触发外层div的点击。输出：我是内层div 我是外层div

• .prevent

等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播），提交事件不再重载页面

• <form v-on:submit.prevent="log('提交')" action="/submit" method="get" accept-charset="utf-8">
      提交
      <input type="submit" name="">
  </form>

如果不加.prevent点击提交会重载页面 

• <a @click.prevent href="https:///www.baidu.com">百度一下</a>

可阻止a标签默认跳转 

• .capture

给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。

• <div style="background: red;width: 240px;height: 240px" @click="log(1)">
      <div style="background: green;width: 200px;height: 200px" @click.capture="log(2)">
          <div style="background: blue;width: 150px;height: 150px" @click="log(3)">
          </div>
      </div>
  </div>

当点击最内层div时如果不加.capture输出为3 2 1 ，加上.capture则会先捕获，输出为2 3 1

• .self

只有点击自身才会触发事件

• <div style="background: red;width: 240px;height: 240px" @click="log(1)">
      <div style="background: green;width: 200px;height: 200px" @click.self="log(2)">
          <div style="background: blue;width: 150px;height: 150px" @click="log(3)">
          </div>
      </div>
  </div>

当点击最内层div，输出3、1而不是3 2 1

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

<a href="https:///www.baidu.com" style="display: block;background: red;width: 240px;height: 240px"
   @click="log(1)">
    <a href="https:///www.baidu.com" style="display: block;background: green;width: 200px;height: 200px"
       @click.self.prevent="log(2)">
        <a href="https:///www.baidu.com" style="display: block;background: blue;width: 150px;height: 150px"
           @click="log(3)">
        </a>
    </a>
</a>

当使用 .self.prevent最内层div仍会跳转百度，只阻止了自身的默认行为， 当使用.prevent.self最内层div就不能跳转了，阻止了所有的点击。

• .once

点击事件只会触发一次，再次点击不会触发

• <a @click.once="log(1)">只会执行一次</a>

• .passive

不拦截默认事件，会执行默认方法。

为什么需要它？

• 浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时，才能知道内部是否会调用preventDefault函数来阻止事件的默认行为，所以浏览器本身是没有办法对这种场景进行优化的。这种场景下，用户的手势事件无法快速产生，会导致页面无法快速执行滑动逻辑，从而让用户感觉到页面卡顿。
• 通俗点说就是每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。
• 这里一般用在滚动监听，@scoll，@touchmove 。因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滑动的流畅度。
• .passive 修饰符尤其能够提升移动端的性能。不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，

• <div v-on:scroll.passive="onScroll">...</div>