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

1.事件冒泡IE提出的事件流是事件冒泡流，这种事件流传播是由内向外进行传递。即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档），如下图：下面演示VUE.JS中的事件冒泡，代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title

不死鸟.亚历山大.狼崽子

4332人浏览 · 2020-08-19 23:39:03

不死鸟.亚历山大.狼崽子 · 2020-08-19 23:39:03 发布

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>

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^