解决父元素内部有可切换or输入元素，点击后直接跳转页面问题(阻止事件冒泡)

金毛好文明

于 2022-11-24 17:13:46 发布

阅读量188

点赞数

CC 4.0 BY-SA版权

分类专栏：踩坑之旅文章标签：前端

本文链接：https://blog.csdn.net/kwroi/article/details/128022540

踩坑之旅专栏收录该内容

10 篇文章

订阅专栏

本文介绍了在前端开发中遇到的一个问题：点击下拉框时，由于事件冒泡导致父元素的点击事件被触发，从而意外跳转页面。解决方法是在父元素上使用`@click.stop`指令，结合`stopClick`方法阻止事件冒泡，确保下拉框正常工作。

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

1. 问题描述

点击每一项可以跳转页面，但想要点击下拉框时，也会跳转，这样就选不起来啦。
在这里插入图片描述

2. 解决方法

需要知道这是事件冒泡触发父元素的点击事件跳转页面造成的，所以应该阻止事件冒泡。

<view class="container" @click.stop="stopClick($event)">
	<uni-data-select
	:clear="false"
	  v-model="value"
	  :localdata="roadRange"
	  @change="change"
	></uni-data-select>
</view>

// 阻止下拉框事件冒泡
stopClick(e) {
	e.stopPropagation()
},