vue.js从入门到深入再到随心而用———事件修饰符的学习-CSDN博客

本文链接：https://blog.csdn.net/qq_42147171/article/details/104933546

事件修饰符的学习

1.本小节内容
2.代码
3.效果

1.本小节内容

.stop:阻止冒泡
.prevent:阻止默认行为
.cupture:实现捕获触发机制
.self:实现点击当前元素才能出发函数触发机制
.once:只触发一次函数

2.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.inner{
				height: 150px;
				background-color: darkcyan;
			}
			.outer{
				background-color: red;
				border:45px solid red;
			}
		</style>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<!--使用.stop阻止冒泡-->
	<!--		<div class="inner" @click="divHandle">
				<input type="button" value="戳他" @click.stop="btnHandle"/>
			</div>-->
			
			<!--使用.prevent阻止默认行为-->
			<!--<a href="http://www.baidu.com" @click.prevent="linkclick">有问题，去百度</a>-->
			
				
			<!--使用.cupture实现捕获触发机制-->
			<!--<div class="inner" @click.capture="divHandle">
				<input type="button" value="戳他" @click="btnHandle"/>
			</div>-->
			
			<!--使用.self实现点击当前元素才能出发函数触发机制-->
			<!--<div class="inner" @click.self="divHandle">
				<input type="button" value="戳他" @click="btnHandle"/>
			</div>-->
			
			<!--使用.once只触发一次函数-->
			<!--<a href="http://www.baidu.com" @click.prevent.once="linkclick">有问题，去百度</a>-->
			
			<!--.stop和.selfd的区别-->
			<!--.stop完全阻止了冒泡，.self阻止当前元素冒泡-->
			<!--<div class="outer" @click="divdivHandle2">
				<div class="inner" @click.self="divHandle">
					<input type="button" value="戳他" @click="btnHandle"/>
					<input type="button" value="戳他" @click.stop="btnHandle1"/>
				</div>
			</div>-->
		</div>
		
		<script type="text/javascript">
			
		new Vue({
			el:'#app',
			data:{

			},
			methods:{
				divHandle:function(){
					console.log('这是出发了inner div的点击事件')
				},
				btnHandle:function(){
					console.log('这是出发了btn 按钮的点击事件')
				},
				linkclick:function(){
					console.log('出发了链接的点击事件')
				},
				divdivHandle2:function(){
					console.log('这是出发了outer div的点击事件')
				},
				btnHandle1:function(){
					console.log('这是出发了btn1 按钮的点击事件')
				}
			}
		})
		</script>

	</body>
</html>