<code>标签不能直接绑定点击事件，因其是纯展示型内联元素，默认不触发鼠标事件且无tabindex；应将事件监听器绑定到其父容器（如<pre>）上。
<code> 标签本身不提供交互能力，它只是语义化地包裹一段内联代码文本。在交互式教程中真正起作用的是围绕它的 JavaScript 逻辑、CSS 样式和 DOM 操作方式。
为什么不能直接给 <code> 绑定点击事件
<code> 是纯展示型的内联元素，没有原生交互行为。你无法直接对它调用 .addEventListener('click', ...) 并期望有响应——不是语法错误，而是用户根本点不到：它默认不触发鼠标事件（pointer-events: none 在某些浏览器中隐式生效），且没有 tabindex，键盘也无法聚焦。
- 常见错误现象：点击
<code>console.log</code>没反应，控制台也无报错 - 正确做法是把事件监听器加在它的父容器上，比如
<pre><code>.../pre>或一个带class="snippet"的<div> - 若真要让它可点击，需显式设置
style="cursor: pointer; user-select: all;"和tabindex="0"，但这是反模式——语义失当，无障碍支持差
<pre><code> 块如何支持一键复制
交互式教程里最常见需求：用户点击代码块右上角「复制」按钮，自动把 <code> 内容写入剪贴板。关键不在 <code>，而在封装结构和 Clipboard API 调用时机：
- 结构必须是
<pre><code class="js">fetch(...)</code><button class="copy-btn">?</button></pre>——<button>与<code>同级，避免事件冒泡干扰 - 获取内容用
codeEl.textContent，不是innerHTML（后者会把 HTML 实体如解码成 <code>，破坏原始代码） - 调用
navigator.clipboard.writeText()需在用户手势（如 click）上下文中执行，否则被浏览器拒绝 - 失败时不要只 console.error，应 fallback 到
document.execCommand('copy')（仅旧版 Safari 支持）或提示“请手动 Ctrl+C”
动态高亮与实时执行依赖 DOM 结构分离
有些教程允许用户修改 <code> 内容并点击「运行」，这要求代码文本能安全转为可执行 JS。但 <code> 本身不参与执行，真正逻辑在外部：
立即学习“前端免费学习笔记（深入）”；
- 输入区应是
<textarea>或<div contenteditable="true">，而非直接编辑<code>—— 后者会破坏 HTML 结构，且contenteditable在<code>上不可靠 -
<code>只用于只读渲染：每次运行前，把 textarea 值经highlight.js或Prism处理后塞进<code>，再用eval()或Function()执行（注意 CSP 限制） - 错误堆栈定位难？因为
eval生成的代码没有真实文件名。解决方案：用new Function('return `' + code + '`')().toString()包裹，或注入//# sourceURL=snippet.js注释辅助调试
最易被忽略的一点：<code> 内容若含用户可控输入（比如从 URL 参数注入），直接 innerHTML 渲染会引发 XSS。必须用 textContent 设置，或对特殊字符做 HTML 实体转义（& → &， → <code>）。这不是样式问题，是安全边界。
