时间戳

首页 > 解决方案 > 获取文本中的点击位置（非输入）

javascript - 获取文本中的点击位置（非输入）

问题描述

目标：使用 IE11 获取非输入元素（跨度/div）内点击的文本位置

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

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

用户将在其中单击，它会打开另一个小部件，其中摘要内容将位于文本区域（实际上是 codemirror 实例）中。一个新的要求是，如果用户在“和”之间单击（a例如），当小部件为他们打开以开始编辑内容时，光标将位于同一位置。bbar

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

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（不幸的是，我的用户一直坚持使用）。

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

标签： javascripthtmlclick

解决方案

我能够将一些东西拼凑在一起并想出这个在 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) );
}

推荐阅读