Vue事件修饰符

最新推荐文章于 2025-04-24 17:23:52 发布

AllenWalker1936

最新推荐文章于 2025-04-24 17:23:52 发布

阅读量171

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/AllenWalker1936/article/details/89360815

版权

Vue 专栏收录该内容

6 篇文章

订阅专栏

Vue事件修饰符

方法

.stop - 阻止冒泡
.prevent - 阻止默认行为//例如a标签的链接的弹出
.capture - 实现捕获触发事件//从内到外
.self - 只有点击当前元素才会触发事件
.once - 只触发一次事件处理函数

stop与self的区别

<div class="outer" @click="div2Handler">
	<div class="inner" @click="div1Handler">
		<input type="button" value="点击" @click.stop="bt1Handler">
	</div>
</div>

.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为。而.stop是停止冒泡行为。

总代码

<!doctype html>
	<head>
	<title>Vue事件修饰符</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style type="text/css">
		.inner{
			height:150px;
			background-color:#66ccff;
		}
	</style>
	</head>

	<body>
		


		<div id="app1">
			<div class="inner" @click="div1Handler">
				<input type="button" value="点击" @click="bt1Handler">
			</div>
			<!-- <div class="inner" @click="div1Handler">
				<input type="button" value="点击" @click.stop="bt1Handler">
			</div> -->
			<!-- <div class="inner" @click.capture="div1Handler">
				<input type="button" value="点击" @click="bt1Handler">
			</div> -->
			<!-- <div class="inner" @click.self="div1Handler">
				<input type="button" value="点击" @click="bt1Handler">
			</div> -->
			<!-- <a href="http://www.baidu.com" @click.once='linkClick'>百度</a> -->
			<!-- <a href="http://www.baidu.com" @click.prevent='linkClick'>百度</a> -->
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app1',
				data:{},
				methods: {
					div1Handler(){
						console.log('触发了inner div1点击事件')
					},
					bt1Handler(){
						console.log('触发了bt1点击事件')
					},
					linkClick(){
						console.log('触发了百度链接的点击事件')
					}
				}
			})
		</script>
	</body>
</html>