uniapp中switch和select组件阻止chane事件冒泡的方法

在uni-app中,‌处理事件冒泡通常使用.stop修饰符来阻止事件冒泡。‌如果你想要在使用switch或select组件时阻止change事件冒泡,‌你可以在模板绑定事件时添加.stop修饰符。‌

示例

使用switch组件

html

Copy Code

<switch @change.stop="switchChange" />

使用select组件(‌假设是一个自定义组件或类似行为)‌

html

Copy Code

<select @change.stop="selectChange">

Option 1

Option 2

注意

确保.stop修饰符紧跟在事件名之后,‌中间不要有空格。‌

如果.stop修饰符不起作用,‌可能是因为特定的组件或框架版本有差异,‌此时建议查看最新的官方文档或寻求社区的帮助。‌

在使用自定义组件时,‌确保自定义组件内部也正确处理了事件冒泡,‌否则可能需要在组件内部也使用.stop。‌

以上方法不好用时可以试试:

给需要change的标签父级元素加上 @tap.stop.prevent

javascript 复制代码
<view @tap.stop.prevent>
							<view><switch :checked="scope.row.status" @change="event=>switchChangeStatus(event, scope.row)" /></view>
							<el-button link type="primary" size="small"@click="delZzp(scope.row)">删除</el-button>
						</view>
相关推荐
LYFlied21 小时前
WebGPU与浏览器边缘智能:开启去中心化AI新纪元
前端·人工智能·大模型·去中心化·区块链
Setsuna_F_Seiei21 小时前
2025 年度总结:人生重要阶段的一年
前端·程序员·年终总结
model200521 小时前
alibaba linux3 系统盘网站迁移数据盘
java·服务器·前端
Rysxt_1 天前
uni-app路由跳转完全指南:从基础到高级实践
uni-app
han_1 天前
从一道前端面试题,谈 JS 对象存储特点和运算符执行顺序
前端·javascript·面试
aPurpleBerry1 天前
React 01 目录结构、tsx 语法
前端·react.js
jayaccc1 天前
微前端架构实战全解析
前端·架构
qingyun9891 天前
Web Components 实战:创建自定义比例条组件
前端
前端小超超1 天前
ionic + vue3 + capacitor遇到backButton问题
前端·javascript·vue.js
GIS之路1 天前
GDAL 空间关系解析
前端