如何在javascript中找到带有偏移量的xy位置

Question

你好，我的 javascript 代码有一些问题。

我想在 javascript 中获取所选文本的 xy 位置，并且我使用这样的越位函数：

function findPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1) 
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function findPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }

但是当我调用此函数来查找所选位置时，位置 X,Y 的结果始终为 0文本

var select = window.getSelection();

var posX = findPosX(select);
var posY = findPosY(select);

，我使用 mozilla firefox.. 请帮我

Answer 1

您需要在选择的一端插入一个虚拟元素。这是一个函数，用于获取所有主要浏览器（包括 IE 6）中所选内容的开始或结束坐标。请注意，这需要支持元素的 getBoundingClientRect() 方法，这排除了 Firefox 2如果您需要支持该浏览器，您可以在虚拟元素上使用诸如 findPosX/Y 函数，而不是 getBoundingClientRect()。

function getSelectionCoordinates(start) {
    var x = 0, y = 0, range;
    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(sel.rangeCount - 1);
            range.collapse(start);
            var dummy = document.createElement("span");
            range.insertNode(dummy);
            var rect = dummy.getBoundingClientRect();
            x = rect.left;
            y = rect.top;
            dummy.parentNode.removeChild(dummy);
        }
    } else if (document.selection && document.selection.type != "Control") {
        range = document.selection.createRange();
        range.collapse(start);
        x = range.boundingLeft;
        y = range.boundingTop;
    }
    return {x: x, y: y};
}

var coords = getSelectionCoordinates(true);
alert(coords.x + ", " + coords.y);