vue中的事件修饰符(stop,prevent,capture,self,once)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件修饰符</title>
	<style type="text/css">
		#app {
			width: 500px;
			height: 300px;
			background-color: pink;
		}
		#box1 {
			width: 300px;
			height: 200px;
			background-color: green;
		}
		#box2 {
			width: 150px;
			height: 100px;
			background-color: red;
		}

	</style>
	<script src="F:/中软国际---前端资料/笔记/第十周/libs/vue-2.4.0.js"></script>

	
</head>
<body>
	<div id="app">
		<!-- stop阻止冒泡 -->
		<!-- <div id="box1" @click="boxClick">
			<input type="button" value="按钮一" @click.stop="btnClick">
		</div> -->
		

		<!-- prevent阻止默认行为 -->
		<!-- <a href="http://www.baidu.com" @click.prevent="aClick">百度一下</a> -->

		<!-- capture  事件捕获机制 -->
		<!-- <div id="box1" @click.capture="boxClick">
			<input type="button" value="按钮一" @click="btnClick">
		</div> -->

		<!-- .self  实现只有点击当前元素时,才会触发事件处理函数 -->
		<!-- <div id="box1" @click.self="boxClick">
			<input type="button" value="按钮一" @click="btnClick">
		</div> -->

		<!-- once 只执行一次事件处理函数 先后顺序无关紧要-->
		<!-- <a href="http://www.baidu.com" @click.once.prevent="aClick">百度一下</a> -->

		<!-- .slef   和   .stop  的区别 -->
		<!-- <div id="box1" @click="boxClick">
			<div id="box2" @click="box2Click">
				<input type="button" value="按钮一" @click.stop="btnClick">
			</div>
		</div> -->
		
		<!-- .self  只会阻止自己身上冒泡行为的触发 并不会真正阻止 冒泡的行为 -->
		<div id="box1" @click.self="boxClick">
			<div id="box2" @click="box2Click">
				<input type="button" value="按钮一" @click="btnClick">
			</div>
		</div>

	</div>

	<script>
		var vm = new Vue({
			el:"#app",
			data: {},
			methods: {
				boxClick() {
					console.log("触发了boxClick")
				},
				btnClick() {
					console.log("触发了btnClick")
				},
				aClick() {
					alert("百度一下");
				},
				box2Click() {
					console.log("触发了box2Click")
				}
			}

		})
	</script>
</body>
</html>

你可能感兴趣的:(vue中的事件修饰符(stop,prevent,capture,self,once))