如何用JavaScript从点击坐标获取含ruby标签文本的目标字符

原本为每个字符添加<span>并绑定onClick事件的方法，在处理包含<ruby>、加粗等嵌套标签的文本时会失效。比如下面的HTML代码：

<p>
    <ruby>漆黒<rt>しっこく</rt></ruby>の<ruby>闇<rt>やみ</rt></ruby>だった。
</p>

当前使用的JavaScript代码会直接移除<p>标签内的所有嵌套标签，将内容转换成纯文本：<p>漆黒しっこくの闇やみだった。</p>，代码如下：

document.querySelectorAll('p').forEach(el => {
    let elContent = el['innerText'];
    let characters = el['innerText'].split('');
    el.innerHTML = '';
    characters.forEach(char => {
        let span = document.createElement('span');
        span.innerText = char;
        span.addEventListener('click', function () {
            let position = 0;
             let el = this;
             while (el.previousSibling !== null) {
                 position++;
                 el = el.previousSibling;
             }
             console.log(elContent + ' : ' + this.innerHTML + ' : ' + position);
        });
        el.appendChild(span);
    });
});

现在想确认：能不能仅通过屏幕点击坐标（如下方代码中的event.clientX和event.clientY）获取对应位置的文本字符？

function click(event) {
  console.log("x:" + event.clientX + "y:" + event.clientY)
  // 如何获取点击坐标对应的文本字符（假设确实点击到了文字）
}

document.addEventListener("click", click);

补充说明：已知可以用Range实现，但认为这并非Range的设计用途，且精度不足，对应的代码示例如下：

document.onclick = (evt) => {
  const sel = getSelection();
  if (sel.rangeCount) {
    const range = sel.getRangeAt(0);
    const targetedNode = range.startContainer;
    const clickedLetter = targetedNode.textContent.substr(range.startOffset, 1);
    console.log(clickedLetter);
  }
};

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