Vue v-on self事件修饰符

Vue v-on self教程

Vue v-on 指令的 self 修饰符用于实现只有点击当前元素的时候，才会触发事件处理函数。如果是因为事件冒泡或者 Capture 模式 触发的事件，Vue v-on 指令的 self 修饰符则会忽略此类事件。

Vue v-on stop与self

Vue v-on stop 会阻止真正冒泡事件，而 Vue v-on self 只会阻止自己身上的冒泡行为的触发。

案例

Vue v-on self当前元素事件

<!DOCTYPE html>
<html>
<head>
	<title>Vue v-on self</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.self='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 只触发了 button 的点击事件，而没有触发 div 的点击事件，因为我们使用了 Vue v-on self 修饰符来修饰 div 只有自己的事件才能触发，效果如下图所示：

19 vue von self.png

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

Vue v-on 指令的 self 修饰符用于实现只有点击当前元素的时候，才会触发事件处理函数。