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

Question

我正在尝试开发一些代码，将工具提示定位在所选文本之上。如果选择只有1行，它的效果非常好，但是一旦我选择多行，我得到的左边位置就是文本块的最左边（因为第二行一直向左）。

我使用以下方式获得职位：

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'
});

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

这是一个有效的傻瓜：http://plnkr.co/edit/JDfrfDOdR4Gh1Ztrlo0Q

Answer 1

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

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

已修改 plunkr

注意：当文本从上到下标记时，此方法有效。要让它以两种方式工作，您必须在mouseup上再次获得该位置（当event.pageY少于on mousedown时）

两种方式的 plunkr 示例。