wd-button组件阻止事件冒泡的

我看到你已经使用了 @click.stop,但可能还是有事件冒泡的问题。这通常是因为 wd-button 组件的事件处理机制。让我来修复这个问题:

现在修改 handlePayImmediately 函数,添加事件处理:

完成!我已经修复了事件冒泡的问题。现在点击立即支付按钮时不会再触发 handleOrderDetail 方法。

修复方案:

1. 容器层面阻止冒泡

html 复制代码
<view v-if="item.orderStatus === '0'" class="pay-btn-container gap" @click.stop>

pay-btn-container 上添加 @click.stop

2. 按钮层面阻止冒泡

html 复制代码
@click.stop="handlePayImmediately(item, $event)"

传递事件对象 $event 给处理函数

3. 函数内手动阻止冒泡

javascript 复制代码
const handlePayImmediately = (item, event) => {
  // 手动阻止事件冒泡
  if (event) {
    event.stopPropagation();
    event.preventDefault();
  }
  // ... 其他逻辑
}

为什么需要多重保护:

  1. wd-button 组件特性:某些 UI 组件库的按钮可能有自己的事件处理机制
  2. 事件传播机制:确保在不同层级都阻止事件向上传播
  3. 兼容性考虑:不同平台可能对事件处理有差异

现在点击"立即支付"按钮时:

  • ✅ 只会执行 handlePayImmediately
  • ❌ 不会触发 handleOrderDetail
  • ✅ 事件完全被拦截,不会冒泡到父元素

这样就完美解决了事件冒泡的问题!

相关推荐
EndingCoder2 分钟前
Three.js 与 WebXR:初识 VR/AR 开发
开发语言·前端·javascript·ar·vr
懋学的前端攻城狮21 分钟前
深入浅出Vue源码 - 剖析diff算法的核心实现
前端·vue.js·前端框架
小沙盒33 分钟前
使用js把txt的url列表转换成html列表
前端·javascript·html
超浪的晨44 分钟前
JavaWeb 进阶:Vue.js 与 Spring Boot 全栈开发实战(Java 开发者视角)
java·开发语言·前端·javascript·vue.js·html·个人开发
开开心心就好1 小时前
PDF转图片工具,一键转换高清无损
服务器·前端·智能手机·r语言·pdf·excel·batch
Java手札1 小时前
安装如下依赖(package.json 未包含):vueelement-plusecharts@element-plus/icons-vue
前端·javascript·vue.js
EndingCoder1 小时前
Three.js + AI:结合 Stable Diffusion 生成纹理贴图
开发语言·前端·javascript·人工智能·stable diffusion·ecmascript·three.js
haruma sen2 小时前
VUE前端
前端
汪叽家的兔子羡2 小时前
vue模块化导入
前端·javascript·vue.js·typescript·vue3·vue2·vite
植物系青年2 小时前
300 行代码!手把手教你写一个简版 Vue3 框架 📣
前端·vue.js