javascript - 如何确定被点击的文本节点中的字符？

Question

我可以设置一个事件监听器来告诉我何时在 HTML 文档中的某个位置发生了鼠标单击。但是如果点击发生在某些文本上，我需要知道点击发生在文本中的哪个字符上。有办法做到这一点吗？

我能想到一些非常讨厌的解决方案。例如，对于文档中的每个字符，我都可以将其包装在一个单独的元素中，并具有自己的事件。或者，因为我可以知道点击发生在哪个文本节点，我可以执行某种计算(基本上几乎就像模拟文本的呈现)可能使用 clientWidth，以确定点击发生在哪个字符。

肯定有更简单的方法吗？

Answer 1

捕获鼠标事件后，将元素中的文本拆分为两个单独的范围。查看每个跨度的偏移量以确定事件发生在哪个跨度中。现在将该跨度一分为二并再次比较。重复直到您有一个包含单个字符的跨度，该字符的坐标包含鼠标单击的坐标。由于这本质上是一个二进制搜索，因此整个过程将相当快，并且与替代方案相比跨度总数较低。一旦找到字符，就可以解散跨度并将所有文本返回到原始元素。