element ui中el-radio和el-checkbox点击触发两次事件处理方法
找了半天原因,后来发现是el-radio被封装多层,根元素不是input,
我认为是由于事件冒泡机制导致的,因为根元素是label,click事件绑定到了label上。
因为点击label的时候,事件冒泡一次,同时会触发关联的input的change事件,导致事再次触发事件。
<el-radio-group v-model="radio" @click.native="SkipProgress($event)"> <el-radio :label="3">备选项</el-radio> <el-radio :label="6">备选项</el-radio> <el-radio :label="9">备选项</el-radio> </el-radio-group> methods:{ Skipprogress(e){ // 因为原生click事件会执行两次,第一次在label标签上,第二次在input标签上,故此处理 if (e.target.tagName === 'INPUT') return; } }
个人使用
<h4>选择播放站点</h4> <div class="content_bottom"> <div class="content_bottom_item" v-for="(item, index) in playPoint" :key="index" @click="pointDivClick(index)" > <el-checkbox :label="item" v-model="point[index]" size="medium" style="color: #bbbb; font-size: 25px; font-weight: 900" @click.native="SkipProgress($event)" ></el-checkbox> </div> </div> // 防止点击事件冒泡两次 SkipProgress(e){ if (e.target.tagName === 'INPUT') return; },
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南