在JavaScript中如何可靠获取Ctrl+点击的目标字符？

我正在开发一款Chrome扩展，目标是按下Ctrl并点击字符时弹出窗口辅助记忆日语汉字释义。当前测试代码如下：

document.addEventListener("click", (event) => {
    if (event.ctrlKey) {
        let selection = document.getSelection();
        if (selection.rangeCount == 1) {
            let letter = selection.focusNode.data[selection.focusOffset];

            alert(letter);
        }
    }
});

测试时发现，Ruby标签内的前两个汉字「石」「川」能正常获取，但第三个「県」返回undefined，排查后确认selection.focusOffset超出了selection.focusNode.data的长度。测试用HTML结构如下：

<p><span class="colorL"><ruby>石川県<rt>いしかわけん</rt></ruby><ruby>七尾市<rt>ななおし</rt></ruby></span><span class="colorB">で</span><span class="colorB">、</span><span class="color4"><ruby>先月<rt>せんげつ</rt></ruby></span><span class="colorB">の</span><span class="color3"><ruby>地震<rt>じしん</rt></ruby></span><span class="colorB">の</span><span class="color4">あと</span><span class="color1"><ruby><span class="under">避難</span><rt>ひなん</rt></ruby></span><span class="colorB">を</span><span class="color3"><ruby>続<rt>つづ</rt></ruby>け</span><span class="colorB">て</span><span class="color4">い</span><span class="colorB">る</span><span class="color4"><ruby>人<rt>ひと</rt></ruby></span><span class="colorB">の</span><span class="color3">ため</span><span class="colorB">に</span><span class="colorB">、</span><span class="colorC"><ruby>韓国大使館<rt>かんこくたいしかん</rt></ruby></span><span class="colorB">の</span><span class="color4"><ruby>人<rt>ひと</rt></ruby></span><span class="colorB">や</span><span class="colorL"><ruby>日本<rt>にっぽん</rt></ruby></span><span class="colorB">に</span><span class="color4"><ruby>住<rt>す</rt></ruby>ん</span><span class="colorB">で</span><span class="color4">いる</span><span class="color4"><ruby>韓国人<rt>かんこくじん</rt></ruby></span><span class="colorB">などが</span><span class="color4"><ruby>料理<rt>りょうり</rt></ruby></span><span class="colorB">を</span><span class="color4"><ruby>作<rt>つく</rt></ruby>り</span><span class="colorB">ました</span><span class="colorB">。</span></p>

需要解决的核心问题：如何可靠获取被点击的字符，尤其是Ruby标签这类嵌套结构中的字符？

解决方案：基于点击坐标创建精确范围提取字符 #

问题根源在于getSelection()的focusNode和focusOffset在嵌套元素（如Ruby标签）中容易指向错误的节点或偏移，改用点击坐标创建范围能精准定位目标字符。

改进后的代码： #

document.addEventListener("click", (event) => {
    if (!event.ctrlKey) return;

    // 基于点击坐标创建精准范围
    const range = document.caretRangeFromPoint(event.clientX, event.clientY);
    if (!range) return;

    let targetNode = range.startContainer;
    let offset = range.startOffset;

    // 处理点击在字符右侧的情况：偏移等于节点长度时，取前一个节点的最后一个字符
    if (offset === targetNode.length) {
        targetNode = targetNode.previousSibling;
        if (!targetNode) return;
        offset = targetNode.length;
    }

    // 确保操作对象是文本节点，避免元素节点干扰
    if (targetNode.nodeType !== Node.TEXT_NODE) {
        targetNode = targetNode.firstChild;
        if (!targetNode || targetNode.nodeType !== Node.TEXT_NODE) return;
        offset = 0;
    }

    // 提取目标字符（兼容Unicode代理对，鲁棒性更强）
    const char = targetNode.data.substring(offset, offset + 1);
    console.log(char);
    // 替换为你的弹窗逻辑
    // showPopup(char);
});

核心优化点： #

1. 精准定位：用caretRangeFromPoint()直接基于点击坐标生成范围，避免嵌套元素导致的节点偏移错误。
2. 边界处理：针对点击在字符右侧的场景，自动切换到前一个文本节点并取最后一个字符。
3. 节点校验：确保只操作文本节点，排除元素节点的干扰。
4. Unicode兼容：用substring提取字符，避免数组索引对多代码点字符的解析问题。

针对Ruby标签的场景，浏览器会自动将点击位置关联到<ruby>下的汉字文本节点，而非<rt>的假名节点，完美解决原代码的问题。

内容的提问来源于stack exchange，提问作者John Graham