Vue知识点：事件修饰符

Vue知识点：事件修饰符

- prevent 阻止默认事件
类似于e.preventDefault()；

- stop 阻止事件冒泡
类似于e.stopPropagation();

<div class="box1" @click="showMsg">
     <a href="http://www.baidu.com" @click.stop.prevent="showMsg">点击提示</a>
</div>

showMsg() {
  alert('你好，明天')
}
结果：
因为阻止了默认行为和冒泡，只调用a标签上的click事件，所以只有一个弹出框，不会跳转。
结论：
事件修饰符可以连用，顺序根据需求调整，效果一样。

- once 事件只触发一次

- capture 使用事件的捕获模式

<div class="box1" @click.capture="showMsg(1)">
     box1
     <div class="box2" @click="showMsg(2)">box2</div>
</div>

showMsg(msg) {
   consoloe.log(msg)
}

结论：
点击box2的时候结果是：2，1
使用capture后结果是：1，2

- self 只有event.target是当前操作的元素时才触发事件

<div class="box1" @click.self="showMsg">
     <button @click="showMsg">点击提示</button>
</div>

showMsg() {
   alert('111111111')
}

结论：
没有加self之前event.target操作的元素是button,触发的事件是button上的showMsg方法，
加上self之后event.target操作的元素是box1这个div，触发的事件是box1上的showMsg方法。

- passive 事件的默认行为立即执行，无需等待事件回调执行完毕

<ul @wheel="demo" class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

demo(){
   for(let i=0; i<1000;i++){
       console.log(#，1)
   }
   console.log(‘滚不动了’，2)
}

结论：
没有加passive之前，会先执行demo方法里的for循环语句，等到for循环结束后才会执行wheel的滚动条默认行为，
加上passive之后，会先执行wheel的默认行为，即滚动条先滚动，后执行for循环

注：passive大部分情况用于移动端项目中比较多