自定义事件被执行了冒泡导致其他 dom 的 click 被执行

自定义事件被执行了冒泡导致其他 dom 的 click 被执行

产品分类：

uniapp/小程序/字节跳动

PC开发环境操作系统：

Mac

PC开发环境操作系统版本号：

macos 14

HBuilderX类型：

正式

HBuilderX版本号：

3.8.12

第三方开发者工具版本号：

4.1.4

基础库版本号：

2.98.0.6

项目创建方式：

HBuilderX

示例代码：

代码在上面图片中

操作步骤：

偶发触发，子组件的 emit 偶发失败，具体原因未知，但触发了冒泡

预期结果：

emit 自定义事件失败了，不应该触发 click 事件冒泡

实际结果：

emit 自定义事件失败了，触发了上面 dom 的 click 事件冒泡

bug描述：

子组件在 mounted生命周期向父组件 emit 了自定义事件onlineCount, 但是导致了事件冒泡执行了上面dom 的 click；通过断点查看代码调用堆栈执行了冒泡事件，查看代码逻辑，只在异步时候判断是否冒泡，没有在同步时候判断是否应该冒泡，导致自定义事件调用失败时候启动了冒泡，虽然不知道为何自定义事件调用失败，但是也不应该事件冒泡，这个 bug 很久很久了，一直没查到原因，希望尽快修 bug！

Image Image Image Image Image


1 回复

从描述来看，这是一个自定义事件emit失败导致意外触发事件冒泡的问题。建议从以下几个方面排查：

  1. 检查自定义事件命名是否正确，父组件是否正确定义了@onlineCount监听

  2. 在emit调用前后添加try-catch，确认emit是否真的执行失败：

try {
  this.$emit('onlineCount', data)
} catch(e) {
  console.error('emit失败', e)
}
  1. 对于需要阻止冒泡的情况，可以在事件处理函数中添加：
handleClick(e) {
  e.stopPropagation()
  // 其他逻辑
}
回到顶部