vue的事件修饰符的使用

最新推荐文章于 2024-04-12 11:01:11 发布

weixin_40541713

最新推荐文章于 2024-04-12 11:01:11 发布

阅读量79

点赞数

本文链接：https://blog.csdn.net/weixin_40541713/article/details/100133374

版权

事件修饰符

stop：阻止冒泡
prevent：阻止默认行为
capture ：实现捕获触发事件的机制
self：实现只有点击当前元素时才会触发事件

once：只触发一次事件处理函数

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="vue-2.4.0.js"></script>
	<style type="text/css">
		.inner{
			height: 150px;
			background-color: pink;
		}
	  .outer{
	  	padding: 40px;
	  	background-color: deeppink;
	  }
	</style>
</head>
<body>
	<div id="app">
		<!-- stop阻止冒泡 -->
		<!-- <div class="inner" @click="divHandler">
			<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="divHandler">
			<input type="button" value="点我" @click="btnHandler">
		</div> -->

		<!-- self,实现只有点击当前元素时才会触发事件 -->
		<!-- <div class="inner" @click.self="divHandler">
			<input type="button" value="点我" @click="btnHandler">
		</div> -->

		<!-- once只触发一次事件处理函数 -->
		 <a href="http://www.baidu.com" @click.prevent.once=linkClick>电脑监控</a>		

		 <!-- <div class="outer" @linkClick="divHandler2">
		 	<div class="inner" @linkClick="divHandler">
		 		<input type="button" value="点我" @click.self="btnHandler">
		 	</div>
		 </div> -->

	</div>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{},
			methods:{
				divHandler(){
					console.log("触发了div1事件");
				},
				btnHandler(){
					console.log("触发了btn事件");
				},
				linkClick(){
					console.log("触发了link事件");
				},
                divHandler2(){
					console.log("触发了div2事件");
				}   
			}
		})
	</script>
</body>
</html>

weixin_40541713

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的事件修饰符的使用

事件修饰符stop：阻止冒泡prevent：阻止默认行为capture ：实现捕获触发事件的机制self：实现只有点击当前元素时才会触发事件once：只触发一次事件处理函数 <html lang="en"><head> <meta charset="UTF-8"> <title>Document</tit...
复制链接

扫一扫