Vue学习笔记----事件修饰符

最新推荐文章于 2023-11-25 22:09:22 发布

aeipyuan

最新推荐文章于 2023-11-25 22:09:22 发布

阅读量135

点赞数

分类专栏：前端文章标签： Vue

本文链接：https://blog.csdn.net/weixin_42060896/article/details/102773766

版权

前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

Vue事件修饰符

stop停止冒泡，不触发父元素
self只支持本身触发，子元素触发无效
once只触发一次
prevent阻止默认事件

capture捕获事件触发机制,由外到内触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件修饰符</title>
		<style type="text/css">
			*{
				padding:0px;
				margin:0px;
			}
			.red{
				width:150px;
				height:150px;
				background-color:red;
			}
			.green{
				width:100px;
				height:100px;
				background-color:green;
			}
			.blue{
				width:50px;
				height:50px;
				background-color:blue;
			}
		</style>
		<script type="text/javascript"  src="lib/vue.js"></script>
		<script type="text/javascript">
			window.onload=function(){
				var vm=new Vue({
					el:"#container",
					data:{},
					methods:{
						redClick(){
							console.log("red");
						},
						greenClick(){
							console.log("green");
						},
						blueClick(){
							console.log("blue");
						},
						go(){
							console.log("触发a事件")
						}
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="container">
			<!-- self只支持本身触发，子元素触发无效 -->
			<div class="red" @click.self="redClick">
				<!-- once只触发一次 -->
				<div class="green" @click.once="greenClick">
					<!-- stop停止冒泡，不触发父元素 -->
					<div class="blue" @click.stop="blueClick">	
					</div>
				</div>
			</div>
			
			<br />
			
			<!-- capture捕获事件触发机制,由外到内触发 -->
			<div class="red" @click.capture="redClick">
				<div class="green" @click="greenClick">
					<div class="blue" @click="blueClick">	
					</div>
				</div>
			</div>
			<!-- prevent阻止默认事件，不会跳转 -->
			<a class="baidu" @click.prevent="go" href="www.baidu.com">百度</a>
		</div>
	</body>
</html>

aeipyuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记----事件修饰符

Vue事件修饰符stop停止冒泡，不触发父元素 self只支持本身触发，子元素触发无效 once只触发一次 prevent阻止默认事件 capture捕获事件触发机制,由外到内触发 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>事件修饰符&...
复制链接

扫一扫

专栏目录