Vue之事件与属性

Vue事件处理：冒泡、阻止默认行为与事件修饰符

最新推荐文章于 2024-05-30 16:11:37 发布

原创最新推荐文章于 2024-05-30 16:11:37 发布 · 291 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了Vue中事件处理的基本概念，包括事件简写(@click)，事件对象($event)用于获取事件信息，以及如何阻止事件冒泡（Vue的.stop和原生js的e.stopPropagation()）。此外，还讨论了阻止默认事件的行为，如链接的点击行为，通过.e.preventDefault()和.@click.prevent实现。最后提到了键盘事件的监听和事件修饰符的使用，如.stop、.prevent、.capture等，这些修饰符可以改变事件的处理方式和顺序。

一、事件和属性

1、事件

1.1 事件简写

v-on:click=“”
简写方式@click

1.2 事件对象$event

包含事件相关信息、如事件源、事件类型、偏移量
target、type、offset

1.3 事件冒泡

阻止事件冒泡：
方式一：原生js方式，依赖于事件对象（e.stopPropagation()）

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">事件冒泡</h1>
		</header>
		<div class="mui-content" id="content">
			<div @click="printf()">
				<div @click="print()">
					<div @click="show($event)">click me</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#content",
				data:{
					
				},methods:{
					printf:function(){
						console.log("printf")
					},
					print:function(){
						console.log("print")
					},
					show:function(e){
						console.log("show");
						console.log(e.target.innerHTML);//DOM对象
						e.stopPropagation();//阻止事件冒泡(原生js方式)
					}
				}
			})
			mui.init()
		</script>
	</body>

</html>

方式二：Vue方式，不依赖于事件对象
使用 @click.stop

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">事件冒泡</h1>
		</header>
		<div class="mui-content" id="content">
			<div @click="printf()">
				<div @click="print()">
					<div @click.stop="show()">click me</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#content",
				data:{
					
				},methods:{
					printf:function(){
						console.log("printf")
					},
					print:function(){
						console.log("print")
					},
					show:function(){
						console.log("show")
					}
				}
			})
			mui.init()
		</script>
	</body>

</html>

1.4 事件默认行为

a) 原生js方式（e.preventDefault()）

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">阻止默认事件</h1>
		</header>
		<div class="mui-content" id="content">
			<a href="#" @click="lianjie($event)">我是一个链接，点我</a>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#content",
				data:{
					
				},methods:{
					lianjie:function(e){
						console.log("lianjie");
						e.preventDefault();//阻止默认事件(原生js方式)
					}
				}
			})
			mui.init()
		</script>
	</body>

</html>

b) Vue方式
@click.prevent

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">阻止默认事件</h1>
		</header>
		<div class="mui-content" id="content">
			<a href="#" @click.prevent="lianjie()">我是一个链接，点我</a>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#content",
				data:{
					
				},methods:{
					lianjie:function(e){
						console.log("lianjie");
					}
				}
			})
			mui.init()
		</script>
	</body>

</html>

1.5 键盘事件

回车：@keydown.13 或 @keydown.enter
上：@keydown.38 或 @keydown.up

1.6 事件修饰符

.stop
.prevent
.capture
.self
.once
.passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>