vue.js 重学笔记(8) -- .stop .prevent .once .capture .self 事件修饰符的区别与应用

背景
页面上有三个嵌套的div，a在最外侧，b在中间层，c在最里层。正常情况下，当我们点击c的时候，b的事件也会触发，a的事件也会触发。当我们点击b的时候，a的事件也会触发，这就是经典的冒泡事件。

问题：当我们点击c的时候，如何阻止a跟b的事件触发

解决方案：可以在事件后面添加修饰符。

1. 什么是修饰符

修饰符是以 .+修饰词 组成的，放在指令的后面，充当后缀名，起到对事件的补充说明作用。

例子 .stop

2. DOM事件修饰符

2.1.stop

.stop阻止单击事件继续传播

	 <div id="c" @click.stop="handlec">

2.2.prevent

.prevent 阻止事件的默认行为，如点击a标签不会刷新页面，提交事件不再重载页面

    <a href=""  @click.prevent >按我</a>

当href是空值的时候，点击a标签会在当前页面空跳，这时，我们添加.prevent修饰符，再点击a标签的时候就不刷新页面了。

23..capture

.capture 触发内部元素事件之前，先执行此元素的事件。

	  <div id="a" @click="handlea">
			  aaa
			  <div id="b" @click.capture="handleb">
				  bbb
			  	 <div id="c" @click="handlec">
			  	 	  ccc
			  	 </div>
			  </div>
			  
		  </div>

当我们点击c的时候，先会触发b，然后触发c，最后触发a。再冒泡行为发生前，先会触发捕捉元素事件。

2.4.self

.self 对冒泡不起作用，只有触发元素是自身才会触发

	  <div id="a" @click="handlea">
			  aaa
			  <div id="b" @click.self="handleb">
				  bbb
			  	 <div id="c" @click="handlec">
			  	 	  ccc
			  	 </div>
			  </div>
			  
		  </div>

当点击c的时候，b是不会触发的，因为现在点击的不是b自身，只有当我们点击b的时候，它才会触发。

2.5.once

.once 事件将只会触发一次