vue.js（2）：如何阻止事件传播和默认行为_vue阻止默认事件

作者：繁依Fanyi0 | 2024-02-13 02:16:55

踩

vue阻止默认事件

1.事件冒泡

IE提出的事件流是事件冒泡流，这种事件流传播是由内向外进行传递。即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档），如下图：

下面演示VUE.JS中的事件冒泡，代码如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script>
			window.onload=function(){
				new Vue({
					el:"#root",
					methods:{
						showA:function(){
							console.log("执行A方法");
						},
						showB:function(){
							console.log("执行B方法");
						},
						showC:function(){
							console.log("执行C方法");
						}
					}
				})
			}
		</script>
		<style>
			.a{
				border: #FF6600 solid 1px;
				width: 300px;
			}
			
			.b{
				border: #FF6600 solid 1px;
				width: 200px;
			}
			
			.c{
				border: #FF6600 solid 1px;
				width: 100px;
			}
		</style>
	</head>
	<body>
 
		<div id="root">
		    <!--阻止事件冒泡-->
			<div @click="showA()" class="a">A
				<div @click="showB()" class="b">B
					<div @click="showC()" class="c">C</div>
				</div>
			</div>
		</div>
 
	</body>
</html>

点击C区域，查看控制台输出，会发现，同时促发了外部B区域和A区域的方法；

下面添加一个C stop区域，演示阻止事件冒泡，在该区域的click方法上添加一个stop属性，如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script>
			window.onload=function(){
				new Vue({
					el:"#root",
					methods:{
						showA:function(){
							console.log("执行A方法");
						},
						showB:function(){
							console.log("执行B方法");
						},
						showC:function(){
							console.log("执行C方法");
						}
					}
				})
			}
		</script>
		<style>
			.a{
				border: #FF6600 solid 1px;
				width: 300px;
			}
			
			.b{
				border: #FF6600 solid 1px;
				width: 200px;
			}
			
			.c{
				border: #FF6600 solid 1px;
				width: 100px;
			}
		</style>
	</head>
	<body>
 
		<div id="root">
		    <!--阻止事件冒泡-->
			<div @click="showA()" class="a">A
				<div @click="showB()" class="b">B
					<div @click="showC()" class="c">C</div>
					<div @click.stop="showC()" class="c">C stop</div>
				</div>
			</div>
		</div>
	</body>
</html>

点击C stop区域查看效果，如下图，事件冒泡已阻止：

2.默认行为

很多标签都有默认行为，在点击以后触发默认行为，代码如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script>
			window.onload=function(){
				new Vue({
					el:"#root",
					methods:{
						showA:function(){
							console.log("执行A方法");
						},
						showB:function(){
							console.log("执行B方法");
						},
						showC:function(){
							console.log("执行C方法");
						}
					}
				})
			}
		</script>
	</head>
	<body>
		<div id="root">
			<!--阻止默认行为-->
			<a href="http://www.baidu.com" @click="showA()">clickA</a>			
		</div>
	</body>
</html>

运行以上代码会发现，点击完标签以后，会先触发点击事件，然后跳转页面。

下面添加一个新的a标签，演示阻止默认行为，在该区域的click方法上添加一个prevent属性，如下


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script>
			window.onload=function(){
				new Vue({
					el:"#root",
					methods:{
						showA:function(){
							console.log("执行A方法");
						},
						showB:function(){
							console.log("执行B方法");
						},
						showC:function(){
							console.log("执行C方法");
						}
					}
				})
			}
		</script>
		
	</head>
	<body>
		<!--阻止事件冒泡-->
		<div id="root">
			<!--阻止默认行为-->
			<a href="http://www.baidu.com" @click="showA()">clickA</a>
			<a href="http://www.baidu.com" @click.prevent="showA()">clickA</a>
 
		</div>
	</body>
</html>

点击以后，不触发默认事件。

3.只执行一次

在点击事件的后面加行once属性，该事件只会运行一次，代码如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script>
			window.onload=function(){
				new Vue({
					el:"#root",
					methods:{
						showA:function(){
							console.log("执行A方法");
						},
						showB:function(){
							console.log("执行B方法");
						},
						showC:function(){
							console.log("执行C方法");
						}
					}
				})
			}
		</script>
	</head>
	<body>
		<!--阻止事件冒泡-->
		<div id="root">
			
			<!--只执行一次 addEventListener removeEventListener-->
			<button @click.once="showB()">once</button>
		</div>
	</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/79388