Vue.js事件修饰符

最新推荐文章于 2024-07-04 10:21:44 发布

哒哒键盘小哥

最新推荐文章于 2024-07-04 10:21:44 发布

阅读量175

点赞数

分类专栏：前端框架vue.js

本文链接：https://blog.csdn.net/qq_41304579/article/details/103445349

版权

前端框架vue.js 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

事件修饰符

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当时间在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次

代码案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件修饰符</title>
	<script src="vue.js"></script>
	<style>
		.inner{
			height: 150px;
			background-color: skyblue;
		}
		.outer{
			padding: 40px;
			background-color: green;
		}
	</style>
</head>
<body>
	<div id="app">
		<!-- 
			//stop事件修饰符的使用
		<div class="inner" @click="div1Handler">
			
				在触发input的点击事件时，其后还会触发了它父级元素div的点击事件，称为冒泡事件
				使用 .stop 可以阻止冒泡
			<input type="button" value="戳它" @click.stop="btnHandler">
		</div> 
		-->

		<!-- 使用 .prevent 阻止默认行为 即不跳转
		<a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a> -->
		
		<!-- 使用 .capture 实现捕获触发时间的机制(原本由内而外触发事件，使用该修饰符后，事件触发顺序由外到内)
		即先执行外部元素（父级）的点击事件，再执行目标元素的点击事件
		<div class="inner" @click.capture="div1Handler">
			<input type="button" value="戳它" @click="btnHandler">
		</div>  -->


		<!-- 使用 .self 实现只有点击当前元素时候，才发触发事件处理函数
		<div class="inner" @click.self="div1Handler">
			<input type="button" value="戳它" @click="btnHandler">
		</div>  -->

		<!-- 使用 .once 只触发一次事件处理函数
		<a href="http://www.baidu.com" @click.prevent.once="linkClick">百度一下</a> -->


		<!-- 演示 .stop和 .self 的区别 -->
		<div class="outer" @click="div2Handler">
			<div class="inner" @click="div1Handler">
				<input type="button" value="戳它" @click.stop="btnHandler">
			</div> 
		</div>

		<div class="outer" @click="div2Handler">
			<div class="inner" @click.self="div1Handler">
				<input type="button" value="戳它" @click="btnHandler">
			</div> 
		</div>
		<!--  .self 只会阻止自己身上冒泡行为的触发，并不会阻止冒泡行为 -->

	</div>

	<script>
		var vm=new Vue({
			el:'#app',
			data:{},
			methods:{
				div1Handler(){
					//触发inner div的点击事件
					console.log("div1的点击事件")
				},
				btnHandler(){
					//触发按钮的点击事件
					console.log("input btn的点击事件")
				},
				linkClick(){
					console.log("触发了连接的点击事件")
				},
				div2Handler(){
					console.log("div2的点击事件")
				}
			}
		})
	</script>
</body>
</html>