Vue学习笔记【6】——事件修饰符

• .stop 阻止冒泡（阻止事件向外层冒泡）

• .prevent 阻止默认事件（链接跳转、表单提交）

• .capture 添加事件侦听器时使用事件捕获模式（从外到里触发事件）

• .self 只当事件在该元素本身（比如不是子元素）触发时触发回调

• .once 事件只触发一次

注意：

1.once和prevent的先后顺序不会影响结果

2.self和stop的区别

四个div从内层到外层分别为：div1~div4，各绑定一个点击事件

当点击div2时，会发生事件冒泡，依次触发了div2、div3、div4

stop阻止了（使用该修饰符的元素引发的）所有的冒泡行为。但不能阻止其内层元素冒泡造成的其事件触发。

例子：为div2添加stop修饰符，当点击div2时，不再产生div2引起的事件冒泡行为，只触发了div2；当点击div1时，div1会引发事件冒泡，导致div2的事件触发，但是不再继续冒泡，最终触发了div1和div2。

self是阻止（冒泡到使用该修饰符的元素的本身的）冒泡行为。只有点击这个元素本身才会触发这个元素绑定的事件，然后继续向上冒泡。它内部元素的冒泡不会使它绑定的事件触发，但会继续往外冒泡。

例子：为div2添加self修饰符，当点击div2时，触发了div2、div3、div4；当点击其内部的div1时，触发了div1,viv3，div4。