Ruby标签无法动态切换，必须用JS操作DOM：点击rb时检查并插入/移除rt元素，建议单字包裹ruby、事件委托绑定、预置拼音数据，移动端需加touch-action: manipulation。
ruby标签本身不支持动态切换，必须用JS操作DOM结构
HTML的 ruby 是纯静态语义标签，浏览器渲染后不会响应数据变化。想实现“点击汉字显示拼音、再点收起”，不能靠CSS伪类或属性切换，必须用JS手动插入/移除 rt 元素。
常见错误是试图给 ruby 加 data-pinyin 后只改属性值——这完全无效，rt 不会自动出现或消失。
- 每次切换都要显式创建
rt元素并appendChild，或调用remove()清掉已有rt - 避免重复插入：插入前先检查
rb.nextElementSibling是否为rt，或用querySelector('rt') - 若原文含多个字（如“你好”），建议每个字单独包一层
ruby，否则拼音位置易错乱
用事件委托绑定点击，避免逐个加监听器
如果页面有几十个可点汉字，给每个 ruby 单独绑 onclick 会浪费内存且难维护。直接在父容器（如 article 或 div#content）上用事件委托更稳妥。
关键判断逻辑是：点击目标是否为 rb 元素，且其父节点是 ruby。
立即学习“前端免费学习笔记（深入）”；
container.addEventListener('click', e => {
const rb = e.target.closest('rb');
if (!rb || rb.parentElement.tagName !== 'RUBY') return;
togglePinyin(rb.parentElement);
});
拼音数据来源决定性能和兼容性
动态拼音不是JS内置能力，必须引入外部数据。选哪种方式直接影响首屏速度和离线可用性：
- 前端查表（如
pinyin-pro库）：体积约80KB gzip，支持多音字和分词，但首次加载略慢 - 服务端预生成：HTML里直接写好
data-pinyin="nǐ hǎo"，JS只做显隐控制，零延迟，但需后端配合 - 简单映射对象（仅常用3500字）：适合小项目，代码里放个
const PINYIN = { '你': 'nǐ', '好': 'hǎo' }，无额外请求，但缺字就空白
注意：中文字符直接用 charCodeAt(0) 查Unicode码点无法得到拼音，必须查字典。
移动端点击区域太小，务必加 touch-action: manipulation
默认情况下，iOS Safari 对 rb 这类内联元素的触摸响应有300ms延迟，且点击反馈弱。用户常误以为没点中。
解决方法是在CSS里加一行：
rb { touch-action: manipulation; }
同时确保 rb 有足够点击面积（比如加 padding 或设 display: inline-block），否则手指容易点偏。
别忽略这个细节：PC端测试正常，一到真机就失灵，大概率是这里卡住的。
