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

珵煜ini2025-07-07 18:09

我看到你已经使用了 @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();
  }
  // ... 其他逻辑
}

为什么需要多重保护：

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

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

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

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