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

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

相关推荐
子兮曰5 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰5 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万5 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝5 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋5 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁5 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王95275 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大5 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师5 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学5 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端