获取文本内的点击位置（非输入）

Question

目标：使用IE11获取非输入元素（范围/格）内单击的文本位置

我有一个工作台，供用户使用小部件添加和修改内容。 有一个主窗口小部件，其中列出了不同类型的内容，例如，它可能具有以下内容：

<div class='summaryView'>
    <div class='summaryHead'>Summary 1</div>
    <div class='summaryContent'>Foo bar baz</div>
</div>

用户将在其中单击，这将打开另一个小部件，其中摘要内容将位于文本区域（实际上是代码镜像实例）内。 一个新的要求是，例如，如果用户在bar的a和b之间单击，则当小部件打开以开始编辑内容时，光标将位于同一位置。

我这样做的问题是知道他们点击的实际位置。 我可以从事件中获取坐标...但是这并不能真正帮到我（除非我使用了等宽字体，这不是一个选择）。

我还发现document.caretPositionFromPoint和document.caretRangeFromPoint似乎很有帮助...，我可以执行以下操作：

if (document.caretPositionFromPoint) {
    range = document.caretPositionFromPoint(e.pageX, e.pageY);
    textNode = range.offsetNode;
    offset = range.offset;

} else if (document.caretRangeFromPoint) {
    range = document.caretRangeFromPoint(e.pageX, e.pageY);
    textNode = range.startContainer;
    offset = range.startOffset;
}

...然后从那里去...除非这些不适用于IE11（不幸的是，我的用户一直无法使用IE11）。

即使文档似乎表明它应与IE一起使用。 我假设它与“这是一项实验技术”有关。

Answer 1

我能够拼凑出一些东西，并提出了这似乎在IE11中对我有用，为我提供了parentElement和单击的文本偏移量：

if (document.body.createTextRange) {
    range = document.body.createTextRange ();
    range.moveToPoint (event.clientX, event.clientY);
    var end = Math.abs( range.duplicate().moveEnd('character', -1000000) );
    var rDup = range.duplicate();
    range.collapse( false );
    var parentElement = rDup.parentElement();
    var children = parentElement.getElementsByTagName('*');
    for (var i = children.length - 1; i >= 0; i--) {
        rDup.moveToElementText( children[i] );
        if ( rDup.inRange(range) ) {
            parentElement = children[i];
            break;
        }
    }
    rDup.moveToElementText( parentElement );
    var offset = end - Math.abs( rDup.moveStart('character', -1000000) );
}