Vue v-on capture事件修饰符

Vue v-on capture教程

Vue v-on 指令的 capture 修饰符用于添加事件侦听器时使用事件捕获模式。

事件捕获模式即当元素发生冒泡时，先触发带有该修饰符的元素，若有多个该修饰符，则由外而内触发。是与事件冒泡正好相反的形式。

案例

Vue v-on capture

Vue v-on capture 事件捕获模式

<!DOCTYPE html>
<html>
<head>
	<title>Vue v-on capture 事件修饰符</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<style type="text/css">
	.inner{
		height: 150px;
		background-color: green;
	}
</style>
<body>
	<div id="app">
		<div class="inner"  @click.capture='divHandler'>
			<input type="button"  value="HaiCoder" @click='btnHandler'>
             <p>嗨客网（www.haicoder.net）</p>
		</div>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{
		},
		methods:{
			divHandler(){
				console.log('Inner div点击事件')
			},
			btnHandler(){
				console.log('Btn点击事件')
			}
		}
	})
</script>
</html>

浏览器运行后，点击 button 首先触发了 div 的点击事件，而后再触发了 button 的点击事件，因为我们使用了 Vue v-on capture 修饰符使用事件的捕获模式，效果如下图所示：

18 vue von capture.png

即，我们使用了 Vue v-on capture 事件捕获模式。

Vue v-on指令capture修饰符总结

Vue v-on 指令的 capture 修饰符用于添加事件侦听器时使用事件捕获模式。