javascript - 获取多行选择中第一行文本的位置

Question

我正在尝试开发一些代码，将工具提示放置在所选文本上方。如果选择只有 1 行，它效果很好，但是一旦我选择多行，我得到的左侧位置就是文本 block 的最左边(因为第二行一直到左边)。

我使用以下方法获取位置:

var selection = window.getSelection();
//$this is the div containing the text
containerRect = $this[0].getBoundingClientRect()
selectionRect = selection.getRangeAt(0).getBoundingClientRect();

$tooltip.css({
    position: 'absolute',
    top: selectionRect.top - containerRect.top - 45,
    left: selectionRect.left - containerRect.left,
    backgroundColor: '#fff'
});

我不确定在这种情况下是否可以获得顶线的左侧位置。

这是一个工作plunkr:http://plnkr.co/edit/JDfrfDOdR4Gh1Ztrlo0Q

Answer 1

您可以使用event.pageX来获取光标位置并在mousedown上触发它。您可能需要稍微重新调整代码，但这应该可以解决问题。

var getMousePosition = function(){
    mousePosition = event.pageX;
}
$this.on('mousedown', getMousePosition);

已编辑 plunkr

注意:当文本从上到下标记时，此方法有效。为了让它以两种方式工作，你必须在 mouseup 上再次获取位置(当 event.pageY 小于 mousedown 时)

正在工作 plunkr 两种方式的示例。