我现在需要 where 在一个仅包含文本的 html 块元素中发生点击：
<div>This is some awesome text</div>
我想获得被点击的字母的位置。 限制：无法向 div 添加其他子项。
有什么选择吗？
【问题讨论】：
标签： javascript html dom jquery-click-event
感谢@TimDown，我采用的解决方案取自Mozilla。
function insertBreakAtPoint(e) {
var range;
var textNode;
var offset;
if (document.caretPositionFromPoint) { // standard
range = document.caretPositionFromPoint(e.pageX, e.pageY);
textNode = range.offsetNode;
offset = range.offset;
} else if (document.caretRangeFromPoint) { // WebKit
range = document.caretRangeFromPoint(e.pageX, e.pageY);
textNode = range.startContainer;
offset = range.startOffset;
}
// do whatever you want here!
}
有一个限制（至少我在 Chromium 中有一个小问题）range.textNode 不一定与单击的那个相同。包含的文本可能比预期的要短。其原因仍然未知。 我只是通过 range.textNode.parentElement.firstChild 进行访问，因为在我的情况下 div 只有一个孩子。
【讨论】：
减去当前元素的偏移量得到点击相对于该元素的位置（fiddle）：
$(function () {
$("#awesome").click(function (event) {
var div = $(this);
var posX = event.pageX - div.offset().left;
var posY = event.pageY - div.offset().top;
alert("X: " + posX + " Y: " + posY);
});
});
您必须进行其他计算才能确定点击了哪个字母。
【讨论】：