ruby标签无法直接响应事件，须用span等容器包裹并绑定事件，更新rt内容需操作textcontent或显隐控制，定位注音区域应基于rb和rt节点而非ruby自身。
ruby 标签本身不触发事件、没有交互能力，也不能直接绑定 onclick 或监听用户操作。想让它“动起来”，必须绕过标签语义限制，用 JavaScript 操作其 DOM 结构或包裹容器。
ruby 元素无法直接响应 click 事件
ruby 是纯语义化内联标签，浏览器不会给它分配可点击区域（哪怕加了 cursor: pointer），也不支持 addEventListener('click', ...) 的可靠触发 —— 实测中点击 rb 或 rt 子元素常失效，尤其在 Safari 和旧版 Chrome 中。
- 点击区域实际落在父级行内上下文（比如
span或段落文本流）上，而非ruby自身盒模型 -
event.target很可能返回rb或文本节点，而非ruby - 不支持
tabindex+ 键盘聚焦，也无法被focus()激活
所以别试图给 ruby 直接绑事件，得换思路。
必须用包裹容器承载交互逻辑
真正可行的做法是：把 ruby 套进一个有明确尺寸和交互能力的容器里，比如 span、button 或带 role="button" 的 div。
- 容器需设
display: inline-flex或display: inline-block，否则ruby的行内布局会被破坏 - 推荐用
span包裹，避免语义冲突（button会带来表单提交风险） - 给容器加
tabindex="0"，保证键盘可访问；用keydown监听Enter/Space
<span class="ruby-trigger" tabindex="0"> <ruby><rb>漢</rb><rt>かん</rt></ruby></span>
然后 JS 这样写：
document.querySelector('.ruby-trigger').addEventListener('click', () => {
console.log('触发动态注音行为');
});
// 同时补全键盘支持
document.querySelector('.ruby-trigger').addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
// 执行相同逻辑
}
});
动态替换 rt 内容要小心 DOM 结构
ruby 的子元素顺序固定：rb、rt、rp（可选）。直接用 innerHTML = '...' 会清空整个结构，导致渲染错乱。
- 正确做法是只更新
rt的textContent，或用replaceChild()替换特定rt节点 - 若需多音切换，建议提前把所有
rt都写进 HTML，用style.display = 'none'控制显隐，而不是动态创建
<ruby><rb>行</rb><rt id="rt-hang" style="display:block">háng</rt><rt id="rt-xing" style="display:none">xíng</rt></ruby>
切换时只需：
document.getElementById('rt-hang').style.display = 'none';
document.getElementById('rt-xing').style.display = 'inline';
最容易被忽略的一点：CSS 的 ruby-position 会影响 JS 获取位置
如果你用 JS 计算 ruby 相对于视口的位置（比如做 tooltip 浮层），注意：
-
ruby-position: over（默认）会让rt渲染在上方，但getBoundingClientRect()返回的是rb的框，不是整个ruby占位 - 某些浏览器下
ruby元素自身offsetHeight为 0，必须查rb或rt节点
所以定位逻辑别依赖 ruby 元素本身，改用 rb 节点 + rt 的 getBoundingClientRect() 偏移来算真实注音区域。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
