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
  • ✅ 事件完全被拦截,不会冒泡到父元素

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

相关推荐
AbrahamCS15 分钟前
从角色协同到可运行图:Graph Engineer 与多智能体编排
前端·人工智能·智能体
BigTopOne26 分钟前
VS Code IntelliSense 配置(解决 #include 找不到的报红)
前端
愚公搬代码29 分钟前
【愚公系列】《Web应用安全》005-Visual Studio Code编辑器的使用
前端·安全·编辑器
用户9210802628632 分钟前
2. 以 Bubble 为例,看 Ant Design X Vue 组件是怎么设计的
前端
Liora_Yvonne34 分钟前
Monorepo 里的 shared、services 和 ui 到底怎么划分?
前端
PedroQue9937 分钟前
uni-router v2.1.0 升级:导航守卫全面支持返回值模式
前端·uni-app
猫七先生40 分钟前
从零到一:个人博客自动化部署踩坑全记录
前端
淼澄研学43 分钟前
Python调用通义千问API实现长尾搜题内容自动化生成实战
前端·react.js·架构
绿岛之北44 分钟前
Electron 安全入门:为什么一个 XSS 可能变成 RCE?
前端·electron
舒灿1 小时前
DeepSeek Harness——Agent自我进化的实现途径?
前端·ai编程·deepseek