Vue事件修饰符-冒泡、捕获、按键

项目有一个需求，一层套一层的划入滑出的效果，于是用到了@mouseover、@mouseout这类事件，于是就翻车了

虽是一下想到了就是事件冒泡作祟，但是记性不好，就借此记忆，查询的时候查到这篇博文，写的挺全乎的

@click.stop : 阻止事件冒泡
@click.prevent : 阻止事件默认行为
@click.self : 事件只作用在元素本身，而不是其子元素

补充其他修饰符

@click.capture : 使用事件捕获模式
@click.once : 事件只触发一次 2.1.4新增
@scroll.passive : 告诉浏览器这个事件的默认行为不会被取消 2.3.0新增
@keyup.enter : 按键修饰符，enter被按下的时候触发
@click.ctrl : 系统修饰符，Ctrl 被按下的时候触发 2.1.0新增
@click.ctrl.exact : 有且只有 Ctrl 被按下的时候才触发 2.5.0新增

使用修饰符时，顺序很重要，相应的代码会以同样的顺序产生。
例如：用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击。

https://blog.csdn.net/weixin_29491885/article/details/101213311