10--click事件，阻止事件冒泡

最新推荐文章于 2024-06-14 21:39:32 发布

小芹儿

最新推荐文章于 2024-06-14 21:39:32 发布

阅读量814

点赞数 1

分类专栏： Vue部分

本文链接：https://blog.csdn.net/xu_ze_qin/article/details/105962544

版权

Vue部分专栏收录该内容

39 篇文章 0 订阅

订阅专栏

1、click事件methods方法控制台输出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
		<title>click事件</title>
		<style type="text/css">
			.mydiv{
				width: 500px;
				height: 200px;
				background: orangered;
				margin: 10px auto;
			}
			.mydiv p{
				width: 100px;
				height: 100px;
				margin: 30px auto;
				background: greenyellow;
			}
		</style>
	</head>
	<body>
		<!-- 阻止事件冒泡 -->
		<div id="app">
			<div class="mydiv" @click="div_click">
				<p @click.stop="p_click">段落</p>
			</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
				
				},
				methods:{
					div_click:function(e){
						console.log('点击了div')
					},
					p_click:function(e){
						console.log('点击了p段落')
					}
				  },			
				}
			})
		</script>
	</body>
</html>

2、表单阻止事件冒泡

	<!-- 阻止事件冒泡 -->
		<div id="app">
			<form action="form1" v-on:submit="mysubmit" method="post">
				<input v-model="name" type="text" value="name"/>
				<input type="submit" @click.prevent="mysubmit"   value="提交" />
			</form>
			<!-- .prevent防止页面刷新 -->
			<a href="" @click.prevent="a_click">tiaozhaun</a>
		</div>

			var app=new Vue({
				el:'#app',
				data:{
					name:''
				},
				methods:{
					mysubmit:function(e){
						if(this.name == ''){
							alert('姓名不能为空')
							// 阻止表单提交
							// e.PreventDefault()							
						}
						// return false
					},
					a_click:function(){
						alert('跳转动作')
					}				
				}
			})

小芹儿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10--click事件，阻止事件冒泡

1、click事件methods方法控制台输出<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> <title>cli...
复制链接

扫一扫