Vue入门教程--事件修饰符的设置详解（article:4）

Vue.js 初步入门

---

修饰符介绍

1. .stop ：阻止冒泡
2. .prevent ：阻止默认事件
3. .capture ：增加事件监听器时，使用事件捕获模式
4. .self ：事件在本身触发时，触发回调
5. .once ：事件只触发一次

修饰符详解

1. stop

在原生js里，如果不加以阻止，会有冒泡机制对事件进行冒泡回调，如下图，当我们点击子元素child时，不但子元素的click事件会触发，同时父元素parents的事件也会触发,这就是所谓的事件冒泡机制。

	<style type="text/css">
		#parents{
			width:200px;
			height: 200px;
			background-color: #FF69B4;
		}
		#child{
			width:100px;
			height: 100px;
			background-color: aqua;
		}
	</style>
	<body>
		<div id="container">
			<div id="parents" @click="hadlePclick">
				parents
				<div id="child" @click="hadleCclick">
					child
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		// 新建一个vue对象,里面需要传入一个“选项对象”
		// 也可以理解成json对象
		new Vue({
			//el是element的缩写,传入vue依赖的元素
			el:"#container",
			//数据与,所有与UI交互的数据都可以放在这儿
			data:{
				msg:"hello vue.js"
			},
			//方法块,用来放置方法
			methods:{
				//这是es6写法
				hadlePclick(){
					console.info("parents");
				},
				hadleCclick(){
					console.info("child");
				}
			}
		});
	</script>
</html>

用原生js方法，我们可以在事件末尾调用event.stopPropagation();来阻止事件的冒泡。
vue中，给我们提供了例外一种阻止事件冒泡的方案，那就是事件修饰符.stop，只要在想要阻止冒泡的事件绑定符后面加上事件修饰符，便可以阻止冒泡，如@click.stop，效果如图所示：

<div id="child" @click.stop="hadleCclick">
	child
</div>

2. prevent

有些html标签有自己的默认事件，比如<a>标签，只要你点击了，就会跳转或者刷新，以至于我们整个页面上自己所填写的数据都会被刷新掉。以往的js原生办法是修改a标签的属性href="javascript:void(0);"，这样，整个页面的数据就不会被刷新掉。

<a href="javascript:void(0);">这是a标签</a>

在vue里提供了.prevent事件修饰符，来阻止默认事件的发生：

<input type="text" />

<a href="" @click.prevent="hadleAClick">这是a标签</a>

hadleAClick(){
	console.info("<a>点击了");
}

3. capture

众所周知，事件的捕获过程之后就是事件的冒泡过程，如图所示：

而.capture修饰符就是用事件捕获模式来增加事件监听器的：

<div id="parents" @click.capture="hadlePclick">
	parents
	<div id="child" @click="hadleCclick">
		child
	</div>
</div>

它正好和冒泡的事件发生顺序相反。

4. self

这个修饰符，只会触发他自身的回调函数（事件），只要用这个修饰符修饰过的子类元素事件都只会发生自己的事件，不会向上冒泡：

<div id="parents" @click.self="hadlePclick">
	parents
	<div id="child" @click="hadleCclick">
		child
	</div>
</div>

5. once

.once修饰符修饰过的事件之会发生一次，再点击就不会触发。

<a href="" @click.once="hadleAClick">这是a标签</a>

第一次点击会输出语句，之后再点击就不会执行它的hadleAClick点击事件。

Tip

1. 事件修饰符可以进行串联修饰，不用担心不能同时使用，如@click.prevent.once=""
2. .stop和.self都是阻止冒泡事件的发生，区别在于一个阻止属于“我”的事件向上冒泡，另一个是阻止“我”的子元素来被动冒泡我。

---