如何确定用户点击了div中的哪个单词？

我有一个包含文本的<div>，代码如下：

<div id='log'>alpha bravo charlie delta echo foxtrot</div>

当用户点击该文本时，是否有办法确定点击的是哪个单词？我原本以为相关信息会在事件对象中，但未能找到。

尝试过的代码：

$('#log').mouseup(function (ev) {    // 也尝试过.click()
    ev.something ???
});

注：每个单词是单独添加到<div>中的，因此它们是DOM中独立的TextNode。此外，出于应用的其他原因，最好不要将每个单词包裹在<span>...</span>中。该应用使用jQuery，原生JavaScript方案也可。

可以利用**Selection（选区）和Range（范围）**API实现需求，因为每个单词是独立的TextNode，点击时可直接定位到对应文本节点并获取内容。

原生JavaScript实现 #

document.getElementById('log').addEventListener('mouseup', function(e) {
    const selection = window.getSelection();
    if (selection.rangeCount === 0) return;
    
    const range = selection.getRangeAt(0);
    const textNode = range.startContainer;
    // 确认是目标div下的文本节点
    if (textNode.nodeType === Node.TEXT_NODE && textNode.parentNode === this) {
        const clickedWord = textNode.textContent.trim();
        console.log('点击的单词：', clickedWord);
        // 此处可添加点击后的业务逻辑
    }
});

jQuery版本实现 #

$('#log').mouseup(function(e) {
    const selection = window.getSelection();
    if (!selection.rangeCount) return;
    
    const range = selection.getRangeAt(0);
    const textNode = range.startContainer;
    if (textNode.nodeType === Node.TEXT_NODE && textNode.parentNode === this) {
        const clickedWord = $(textNode).text().trim();
        console.log('点击的单词：', clickedWord);
    }
});

原理说明 #

• 用户点击文本时，window.getSelection()可获取当前选区，即使未选中内容，选区起始位置也会指向点击对应的文本节点。
• 由于每个单词是独立TextNode，range.startContainer就是点击的单词节点，直接取其内容即可得到目标单词。
• 判断textNode.parentNode === this是为了确保节点属于目标<div>，避免干扰其他元素。

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