vue 阻止冒泡事件方法

最新推荐文章于 2025-06-28 08:35:53 发布

翻译最新推荐文章于 2025-06-28 08:35:53 发布 · 2.1k 阅读

个人学习笔记专栏收录该内容

40 篇文章

订阅专栏

博客聚焦于Vue阻止冒泡事件的方法，在前端开发中，冒泡事件可能影响交互逻辑，掌握Vue阻止冒泡的方法能优化页面交互效果，避免不必要的事件触发，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="app">
			<div class="content flex-h" v-for="(index,item) in listData" @click="xq(item)">
				<!--左侧头像-->
				<div class="flex-v user flex-1">
					<div class="use_tx"><img :src="item.pic" />
					</div>
					<div class="sos"><img src="../../image/sos.png" />
					</div>
				</div>
				<!--右侧内容-->
				<div class="flex-v flex-3">
					<div class="title">
						<div v-if="item.type_post == 1">
							一键求助
						</div>
						<div v-else>
							手表求助
						</div>
					</div>
					<div class="time">
						{{item.time_begin}}
					</div>
					<div class="distance">
						{{item.distance}}
					</div>
					<!--<div class="btn_qz" v-if="item.order_type == 0" @click="mapFn(item)">
						紧急求助
					</div>-->
					<!--按钮-->
					<div class="btn_qx" v-if="item.order_type == 1" style="z-index:999999999" @click="qxOrder(item,$event)">
						取消订单
					</div>
					<!--按钮-->
					<!--<div class="btn_qx" v-if="item.order_type == 2" @click="pjOrder(item)">
						评价
					</div>-->
					<!--按钮-->
				</div>
			</div>
		</div>

vm = new Vue({
			el : '#app',
			data : {
				listData : []
			},
			methods : {
//				取消订单
				qxOrder:function(item,event){
				    if(event) {        //vue 组织冒泡事件 event  ->$event
				        event.stopPropagation ? event.stopPropagation(): event.cancelBubble = true;
				    }
					console.log(JSON.stringify(item));

				},
		}
		});