Vue2应用嵌套Vue3项目iframe后点击事件失效问题求助

核心排查方向（针对Vue2父应用） #

因为独立打开Vue3应用正常、Ember嵌同iframe无问题，且hover/输入功能正常，问题大概率出在Vue2父应用的全局事件拦截逻辑上，以下是具体排查和解决步骤：

• 检查全局点击事件的阻止传播逻辑
  父应用可能在document/body层面绑定了全局点击事件，并调用了event.stopPropagation()或event.preventDefault()，导致iframe内的点击事件无法正常触发。
  排查方式：在父应用代码中搜索document.addEventListener('click'、@click.document这类全局点击监听代码，查看是否存在无差别阻止事件传播的逻辑。
  解决示例：给全局点击事件添加判断，跳过iframe相关的事件：

  document.addEventListener('click', (e) => {
    // 判断事件是否来自iframe内部或本身
    const isFromIframe = e.target.tagName === 'IFRAME' || 
                         e.composedPath().some(el => el.tagName === 'IFRAME');
    if (isFromIframe) return;
    
    // 原有业务逻辑
  });
  

• 排查父应用的pointer-events样式
  虽然hover正常，但仍需确认父应用是否给iframe容器或上层元素设置了pointer-events: none（动态添加的样式容易遗漏），可以在浏览器Elements面板查看iframe元素的computed样式。

• 检查全局自定义指令或Vue事件修饰符
  父应用可能存在全局自定义点击指令，或者某些高层组件使用了@click.self/@click.stop等修饰符，范围覆盖到了iframe区域，导致事件被拦截。

• 用浏览器工具追踪事件流程
  打开开发者工具，在Elements面板选中iframe，切换到Event Listeners面板查看绑定的事件；也可以在控制台执行monitorEvents(window, 'click')，点击iframe内元素后查看事件触发日志，确认是否在父应用中被阻断。

补充排查（Vue3子应用，优先级低） #

因为独立打开正常，此部分仅作快速验证：

• 确认子应用未使用Teleport将元素挂载到父应用DOM中（这类元素的事件会受父应用影响）；
• 检查子应用是否有特殊的事件绑定逻辑（如原生事件绑定未正确挂载）。

内容的提问来源于stack exchange，提问作者Sebastian Claes