根本原因是事件监听未作用于实际触发默认行为的元素，尤其在iframe或动态渲染场景中：必须在iframe contentdocument内监听（同源前提下），或对动态内容使用事件委托并准确捕获目标链接，跨域时则因同源策略完全不可行。
为什么 Event.preventDefault 在预览容器里经常失效
根本原因不是事件没绑上，而是事件捕获/冒泡阶段错位，或者目标元素本身不触发默认行为（比如 <div> 点击本就不会跳转）。常见于用 <code>iframe 渲染 Markdown 预览、或用 contenteditable 区域展示富文本时——用户点到里面的 <a href="..."></a>，浏览器直接导航，preventDefault 却没生效。
关键判断点：必须确保监听的是**实际触发默认行为的元素**（通常是 <a></a>），且事件能到达它。如果预览内容是动态插入的（比如通过 innerHTML 或 document.write），绑定事件必须在内容加载后进行，不能只在初始 DOM 上监听。
在 iframe 预览中拦截跳转的正确姿势
iframe 内部是独立上下文，父页面的事件监听器完全收不到子页面的点击。必须把逻辑注入 iframe 的 contentDocument 中，且等其就绪后再操作。
- 先确认 iframe 已加载完成：
iframe.onload或轮询iframe.contentDocument?.readyState === 'complete' - 获取 iframe 内文档对象：
const doc = iframe.contentDocument || iframe.contentWindow?.document - 在 doc 上监听：
doc.addEventListener('click', handlePreviewClick, true)（用捕获阶段更可靠） -
handlePreviewClick中判断目标是否为链接：if (e.target.matches('a[href]')) { e.preventDefault(); }
注意：若 iframe 是跨域的，上述方法会因同源策略报 Blocked a frame with origin ... 错误，此时无法拦截——这是浏览器强制限制，无绕过方案。
对 contenteditable 或 innerHTML 渲染的预览区域做事件委托
这类场景 DOM 动态生成频繁，直接遍历所有 <a></a> 绑事件容易漏绑或重复绑定。推荐用事件委托 + 动态代理：
- 监听预览容器（如
div#preview）的click事件，用冒泡捕获 - 在 handler 中向上查找最近的
<a></a>：const link = e.target.closest('a[href]') - 若存在且 href 非空、非锚点（如
href="#section"可放行），则e.preventDefault() - 额外处理：防止右键“在新标签页打开”，可同时监听
contextmenu并阻止默认菜单（但需权衡用户体验）
别忘了禁用链接的 pointer-events？不行。CSS 禁用后用户连点击都感知不到，且对键盘焦点、屏幕阅读器不友好，preventDefault 是语义正确的拦截方式。
容易被忽略的兼容性与副作用
某些旧版 Safari 对 contenteditable 内链接的 click 事件触发时机异常，可能在 focus 后才触发；部分安卓 WebView 对 iframe 跨文档事件委托支持不稳定。
- 始终检查
e.defaultPrevented是否为true，避免重复调用preventDefault导致控制台警告 - 如果预览区用了
target="_blank"，仅preventDefault不够，还需移除target属性或改写为target="_self"，否则某些浏览器仍会新开页 - 拦截后建议提供显式反馈，比如加个 tooltip 提示“已禁用跳转”，否则用户会困惑为什么点不动
最麻烦的其实是伪协议链接（javascript:...、vbscript:...），它们的执行发生在 click 之后，preventDefault 拦不住——得靠提前清洗 HTML 或重写 href 值。
