vuejs基础-事件修饰符

eadela

发布于 2019-09-29 15:29:03

3370

发布于 2019-09-29 15:29:03

文章被收录于专栏：eadelaeadela

stop阻止冒泡

prevent阻止默认事件

capture添加事件侦听器时使用时间捕获模式

self只当事件在元素本身触发时回调

once事件只出发一次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="vue.min.js" ></script>
		<style>
			.inner{
				height: 150px;
				width: 500px;
				background-color: darkcyan;
			}
			.outter{
				height: 200px;
				width: 550px;
				background-color: darkblue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--<div class="inner" @click="divclick">
				<input type="button" value="戳他" @click.stop="btnclick"/>
			</div>-->
			
			<!--<a href="http://www.baidu.com" @click.prevent="aclick">这是百度链接</a>-->
			<!--<div class="inner" @click.self="divclick">
				<input type="button" value="戳他" @click="btnclick"/>
			</div>-->
			
			<!--<div class="inner" @click.capture="divclick">
				<input type="button" value="戳他" @click="btnclick"/>
			</div>-->
			
			<!--<a href="http://www.baidu.com" @click.prevent.once="aclick">这是百度链接</a>-->
			<div class="outter" @click="outter">
				<div class="inner" @click.self="divclick">
					<input type="button" value="戳他" @click="btnclick"/>
				</div>
			</div>
			<div class="outter" @click="outter">
				<div class="inner" @click="divclick">
					<input type="button" value="戳他" @click.stop="btnclick"/>
				</div>
			</div>
			
		</div>
	</body>
	
	<script>
		new Vue({
			el:"#app",
			data:{},
			methods:{
				divclick(){
					console.log("这是div点击事件");
				},
				btnclick(){
					console.log("这是button点击事件");
				},
				aclick(){
					console.log("这是a标签点击事件！")
				},
				outter(){
					console.log("这是外层div点击事件！")
				}
			}
		});
	</script>
</html>