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

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

这是一个有效的插件: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 两种方式的示例。