クリックするとスパン内のテキストを選択します

Question

クリックしたテキストを取得したいので、「mother」という単語をクリックすると、たとえ別の単語が含まれるスパン内であっても、ログには「mother」という単語のみが表示されます。

このコードを使用しましたが、スパンも選択されません:

関数 getSelectedText(e) {

    if(window.getSelection)
        console.log(window.getSelection().toString()) を返します。
    else if(document.getSelection)
        console.log(document.getSelection()) を返します。
    else if(document.selection)
        return console.log(document.selection.createRange().text);
    console.log("") を返します。
    
}

document.body.onmouseup = getSelectedText;

<div class="目的地">
  <span class="word">妹の母親</span>
  <span class="word" >兄弟</span>
  <span class="word" >父親</span>
</div>

<h1>こんにちは</h1>

Answer 1

span-split オプションはすべてのブラウザで機能し、サードパーティのライブラリを使用する必要はありません。