vue 事件修饰符

例子

在一个超链接中设置点击事件实现弹窗但是要让它无法跳转网页

注：在click后加.prevent即为事件修饰符,把默认行为阻止掉了 

vue事件修饰符前三个常见后三个不怎么用

阻止事件冒泡

 只触发一次

 使用事件的捕获模式

比如该两个方法处于嵌套的情况下由于没有加阻止冒泡事件,所以点击了box2也会触发box1

先进行捕获再进行冒泡,冒泡阶段则为去处理事件

 

 默认捕获阶段由外到内,冒泡阶段由内到外

设置捕获阶段就开始处理事件

 加capture

 

冒泡上去了,还是点击的是按钮
 

即event.target仍然为按钮 

加了self之后意思为比如冒泡冒上去,但event.target为button所以div的click不会触发

从某种程度上说@click.self也能阻止冒泡

 

passive

滚动 overflow:auto

@scroll 滚动条的滚动事件：一滚动滚动条就发生事件

 

@wheel：鼠标滚动轮的滚动 

 

区别：wheel滚动条滚到底了,只要滚动鼠标滚轮就可以触发事件而且只有鼠标滚轮能触发

scroll 滚动条滚到底还要继续往下滚动则不会触发了

 

 

wheel事件原理

先触发wheel方法再进行方法回调,方法回调结束则,进行默认方法,把滚动条往下移动

 但由于有个循环导致占用了事件的执行时间

 但加了passive之后则不需要等待方法回调结束再进行默认行为

 但用的不多是因为有些方法没必要使用它

scroll就没有影响 

 一般做移动端的可能会使用的一下