iframe事件不冒泡至父窗口，导致父级mouseup监听失效；可用pointer-events:none穿透事件，但iframe完全失焦；同源时可由iframe内dispatchevent转发，跨域则需postmessage协调。
iframe 本身不穿透，但父层事件监听会失效
iframe 是独立的 document 上下文，它的 mousedown、mouseup、click 都不会冒泡到父窗口——这不是 bug，是浏览器安全模型强制隔离的结果。常见现象是：你在父页面绑了 document.addEventListener('mouseup', stopDrag)，用户拖拽时滑入 iframe 区域再松手，stopDrag 就不执行，拖拽“卡死”。这不是事件“穿透”了 iframe，而是事件根本没发出去。
用 pointer-events: none 让鼠标事件穿过 iframe
这是最轻量、零 JS 的解法，适用于父页面需要接管所有鼠标行为（如拖拽、缩放、选区）的场景：
-
iframe元素上直接加style="pointer-events: none;"，所有鼠标事件（包括mouseup）会穿透到父document - 若 iframe 内部仍需响应点击（比如导出按钮），得把可交互区域“提出来”：用绝对定位将按钮盖在 iframe 上方，或改用
postMessage由父页触发 - 注意：Chrome 95+ 和 Safari 15.4+ 支持良好；旧版 Android WebView 可能忽略该样式，需 fallback 到 JS 方案
同源 iframe 内转发事件到父窗口
仅限 iframe 与父页同域（origin 完全一致），可从 iframe 内部主动派发合成事件：
- iframe 内脚本中监听
mouseup，然后调用window.parent.dispatchEvent(new MouseEvent('mouseup', {bubbles: true})) - 父页监听时必须用
useCapture: true（如document.addEventListener('mouseup', handler, true)），否则捕获不到 - 不要用
CustomEvent模拟原生事件名（如new CustomEvent('mouseup')），部分浏览器不识别其为可冒泡的 UI 事件
跨域 iframe 用 postMessage 协调关键动作
跨域时无法读写 iframe.contentWindow，但可通过 postMessage 实现双向指令通信：
- 父页点击按钮后，调用
iframe.contentWindow.postMessage({type: 'trigger-export'}, 'https://xxx.com') - iframe 内监听
message事件，校验event.origin后，再手动触发目标按钮的click() - 避免用
*作targetOrigin，必须指定精确域名，否则 Chrome 98+ 会静默丢弃消息
真正容易被忽略的是：pointer-events: none 会让 iframe 内所有内容（包括文本、表单、滚动条）彻底失焦和不可交互，它不是“半透明点击”，而是“整块玻璃”。如果业务既要 iframe 可用，又要父页能感知鼠标松开，那就只能放弃纯 CSS 解法，老老实实走 postMessage 或同源事件转发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
