内联框架（）本身不引发点击穿透，问题在于外围容器交互逻辑与事件绑定方式；需用touchend替代click、加preventdefault、合理配置sandbox与focus管理，并优先使用标签。
内联框架（<iframe></iframe>）本身不会直接引发点击穿透，但当它与模态层、遮罩或动态插入的浮层共存时，容易因事件机制错配导致页面失焦——尤其在移动端。核心问题不在 iframe 本身，而在 iframe 外围容器的交互逻辑与事件绑定方式。
用 touchend 替代 click 绑定关闭操作
如果 iframe 被包裹在弹窗或遮罩中（比如 <div class="modal"><iframe src="..."></iframe></div>），而关闭按钮监听的是 click，就极易触发穿透：touch 结束后 300ms 的 click 会落到 iframe 下方或 iframe 内容之外的可点击区域，造成意外跳转或失焦。
- 关闭按钮统一改用
touchend监听，并立即执行 DOM 隐藏（如modal.style.display = 'none'） - 加
e.preventDefault()阻止默认行为，避免部分浏览器仍尝试触发 click - 需兼容 PC 端：用
'ontouchstart' in window判断，分别绑定touchend和click，不混用
iframe 内容失焦要靠 sandbox 和 focus 管理
iframe 加载外部页面后，用户点击其中按钮可能让主页面失去焦点（尤其在 Safari 或旧版 Chrome 中），这不是穿透，而是焦点被 iframe 内容“吸走”且未归还。
- 给 iframe 加
sandbox="allow-scripts allow-same-origin"（按需开放权限），禁用自动聚焦行为 - 在 iframe 加载完成（
load事件）后，主动调用iframe.contentWindow?.blur()，防止其默认获取焦点 - 若需保留 iframe 内交互，打开前记录当前 activeElement，关闭或切换时手动
triggerEl.focus()回到触发源
遮罩层必须设 pointer-events: auto 并隔离事件流
常见错误是给遮罩层设 pointer-events: none 来“透出点击”，但这会让 iframe 上层的关闭区域失效，同时破坏焦点捕获能力，导致 Tab 键跳过遮罩、直接进入 iframe 或底层内容。
- 遮罩层保持
pointer-events: auto，确保能拦截所有触摸/点击 - 遮罩自身绑定
touchend关闭逻辑，不依赖 iframe 内部事件 - 用
inert属性或aria-hidden="true"+tabindex="-1"配合，主动禁用遮罩外区域的键盘可访问性
dialog 标签比自定义遮罩更可靠
若业务允许，直接用原生 <dialog></dialog> 替代 div 遮罩 + iframe 组合。它自带焦点陷阱、backdrop 隔离和 ESC 支持，大幅降低失焦风险。
- 必须用
showModal()，show()不阻断焦点、不渲染 backdrop，等同于普通浮层 - iframe 放入 dialog 内部时，dialog 会接管焦点流；关闭后自动恢复到触发按钮，无需手动管理
- Safari 中仍需补充：打开后
dialog.querySelector('button, input').focus()，关闭前缓存触发源并恢复
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
