javascript:查找 anchor 链接的绝对大小

Question

我需要计算页面中每个锚定链接的位置、高度和宽度。我知道如何找到 x,y 坐标，但高度和宽度有问题。当链接内部有子项(图像、div 等)时，就会出现问题，因此 heightOffset 和 widthOffset 将不起作用。有没有办法做到这一点而不需要对所有 child 进行计算并计算他们的大小？

编辑:

这里有一些代码来演示我的意思(每当按下鼠标时都会调用 press 函数):

function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    return [curleft,curtop];
}

function getHeight(elem) {

          if (elem.style.pixelHeight) {
             return elem.style.pixelHeight;
          } else {
             return elem.offsetHeight;
          }
    }
function getWidth(elem) {

    if (elem.style.pixelWidth) {
       return elem.style.pixelWidth;
    } else {
       return elem.offsetWidth;
    }
}

function press(e)
{


      x= e.pageX;
      y= e.pageY;

    window.alert(x+","+y);


            var links = document.getElementsByTagName('a');
            for (i = 0; i < links.length; i++){
                var pos = findPos(links[i]);
                window.alert(x+","+y+" "+pos[0]+" " + pos[1] + " "+links[i].offsetWidth+ " "+links[i].offsetHeight);
                if (x >= pos[0] && x <= pos[0] + getWidth(links[i]) && y >= pos[1] && y <= pos[1] + getHeight(links[i])){
                    window.alert(links[i].href);
                    i = links.length;
                }
            }


}

例如，当我遇到带有图像的链接时，它不会返回正确的尺寸。

谢谢

Answer 1

offsetWidth/Height 对包含图像的链接做了很多工作，只要您没有做任何奇怪的事情，例如溢出或定位图像或其他子内容以便它们脱离其父级的内容区域。

您的代码在 IE 上没有使用 offsetHeight，而是使用 pixelHeight，它的作用可能与您认为的不同。坚持使用offsetHeight。

相反，您使用的是 event.pageX/Y，这是 IE 没有的非标准扩展。遗憾的是，从事件中获取页面相对坐标的唯一可靠方法是使用 clientX/Y 并针对视口(viewport)滚动进行调整。

我真的不知道为什么你要努力枚举链接位置，而对于鼠标单击/按下事件，你可以非常可靠地使用 event.target 获取被单击的元素/srcElement.事实上，这是唯一可靠的方法。考虑一个分成两行文本的链接。现在你得到的是一个非矩形区域；您无法使用简单的 x 和 y 范围测试来测试特定鼠标位置是否位于该区域内。