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

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

相关推荐
Mr Xu_9 小时前
Vue 3 中计算属性的最佳实践:提升可读性、可维护性与性能
前端·javascript
jerrywus9 小时前
我写了个 Claude Code Skill,再也不用手动切图传 COS 了
前端·agent·claude
玖月晴空9 小时前
探索关于Spec 和Skills 的一些实战运用-Kiro篇
前端·aigc·代码规范
子兮曰9 小时前
深入理解滑块验证码:那些你不知道的防破解机制
前端·javascript·canvas
会一丢丢蝶泳的咻狗10 小时前
Sass实现,蛇形流动布局
前端·css
攀登的牵牛花10 小时前
前端向架构突围系列 - 状态数据设计 [8 - 4]:有限状态机 (FSM) 在复杂前端逻辑中的应用
前端
Lsx_10 小时前
前端视角下认识 AI Agent 和 LangChain
前端·人工智能·agent
我是伪码农10 小时前
Vue 智慧商城项目
前端·javascript·vue.js
不认输的西瓜10 小时前
fetch-event-source源码解读
前端·javascript
用户390513321928810 小时前
前端性能杀手竟然不是JS?图片优化才是绝大多数人忽略的"降本增效"方案
前端