HTML:块元素中的文本; 获得确切的点击位置

Question

我需要现在就在那里,它包含一个点击只会发生文本HTML块元素:

<div>This is some awesome text</div>

我想获得被点击的信件的位置.限制:无法向div添加其他子项.

任何选择？

Answer 1

我采用的解决方案感谢@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只有一个子进程.