vue事件修饰符 stop capture self prevent once @scrol.passive

vue事件修饰符 stop capture self prevent once @scrol.passive

1.事件冒泡

<div @click="fatherEvent">
	父元素
	<div @click="sonEvent">
		子元素
	</div>
</div>

当点击子元素三个字时会发现先触发sonEvent函数，再触发fatherEvent函数，就叫做事件冒泡。

2.stop事件修饰符:阻止事件冒泡

<div @click="fatherEvent">
	父元素
	<div @click.stop="sonEvent">
		子元素
	</div>
</div>

此时点击子元素三个字只会触发sonEvent函数，也就是阻止了事件冒泡。

3.capture事件修饰符：开启事件捕获

<div @click.capture="fatherEvent">
	父元素
	<div @click="sonEvent">
		子元素
	</div>
</div>

事件捕获与事件冒泡的函数执行顺序相反，当点击”子元素“三个字时，会先执行fatherEvent再执行sonEvent。（注意，不论是事件捕获与冒泡都不存在点击父元素触发子元素的情况）

4.self事件修饰符:只有被点击（或者其他触发方式）时才会触发绑定的函数

<div @click.self="fatherEvent">
	父元素
	<div @click="sonEvent">
		子元素
	</div>
</div>

此时点击“子元素”三个字，并不会触发fatherEvent，只会触发sonEvent

5.prevent事件修饰符：阻止默认事件

<a href="www.antinfield.com" @click.prevent="clickEvent">

阻止a标签默认的跳转功能，指挥触发事件clickEvent，并不会跳转。

6.oncet事件修饰符：仅执行一次该事件

<div @click.once="clickEvent">点击我</div>

不论点击几次“点击我”三个字，仅在第一次点击时触发clickEvent函数，多应用于广告。

7.@scrol.passive：可以提高滚动事件的性能

<div @scrol.passive="scrolEvent">
	....
</div>