学习笔记之Vue事件修饰符的使用

事件修饰符

1.修饰符

修饰符	作用
stop	阻止事件冒泡
prevent	阻止默认事件的发生
capture	被此修饰符修饰的事件先触发
self	只有点击被修饰的元素 才触发事件处理函数
once	只触发一次事件

2. 举例说明

1. stop

阻止事件向上冒泡。下图是未添加.stop，点击button触发事件。先触发了btn事件，然后触发了div事件。
当给btn click添加.stop修饰符以后，可以阻止事件向上冒泡。

只触发了btn事件，阻止了向上冒泡

2. prevent

阻止默认的跳转事件，默认点击可以跳转到百度
给事件加了prevent修饰符以后，默认的跳转事件不触发了，只触发了我们自定义的事件函数。

3. capture

简单来说，就是谁被capture修饰，谁就先触发。下图是未给事件添加修饰符。

可以看到点击以后先触发了btn，然后触发了out事件。
添加修饰符以后如下图。

可以看到先触发了out事件，再触发了btn事件。

4. self

表示只有点击了被self修饰的元素时，才会触发事件函数

此时点击btn 只能触发btn事件，并不能触发div事件，当点击按钮外部 也就是div区域时，才可以触发out事件，因为div被self修饰。

5. once

被该修饰符修饰的事件，只会被触发一次。

6. stop和self的区别

self只阻止本身，不是真正阻止了冒泡，只有点击被self修饰的元素，才会触发该事件的发生。
stop是真正阻止了事件冒泡。