1

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

编辑：

这是一些代码来演示我的意思（只要按下鼠标，就会调用 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;
                }
            }


}

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

谢谢

4

3 回答 3

1

offsetWidth/Height在包含图像的链接上做很多工作，只要你没有做任何奇怪的事情，比如溢出或定位图像或其他子内容，以便它们掉出其父内容区域。

你的代码没有offsetHeight在 IE 上使用，它正在使用pixelHeight，它没有做你认为它做的事情。坚持offsetHeight。

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

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

于 2010-01-12T14:28:57.310 回答
0

正确的属性是offsetHeight（不是 heightOffset）和offsetWidth（不是 widthOffset）。
这些属性应该正确返回您所追求的大小，因为假设溢出设置为可见，孩子们会扩展元素以适应。在任何情况下都无需计算孩子的大小。

offsetHeight并且offsetWidth不是任何标准的一部分，但大多数浏览器似乎都已经实现了它们。

由于您在使用 Safari 和 offsetHeight 时遇到问题，也许您可​​以尝试以下getClientRects()方法：

http://www.quirksmode.org/dom/tests/rectangles.html

var dims   = links[i].getClientRects()[0];
var width  = dims.right - dims.left;
var height = dims.bottom - dims.top;

但是，不能说我曾经使用过getClientRects()。听起来结果可能更接近clientWidth和clientHeight。

进一步编辑
我想出了一个解决方法。以下不起作用：

<a href="#">
  <img onclick="press(event);" src="http://sstatic.net/so/img/logo.png" alt="" />
  <!-- onclick handler alerts with size 250x15 -->
</a>

但是在<span>标签周围包裹一个标签<img>，如下所示：

<a href="#"><span>
  <img onclick="press(event);" src="http://sstatic.net/so/img/logo.png" />
  <!-- onclick handler alerts with size 250x61 -->
</span></a>

修复问题。至少，它在 Chrome 中是这样，但就像我之前所说的那样，Chrome 和 Safari 共享 WebKit 渲染引擎，所以它也应该适用于 Safari。

于 2010-01-12T13:59:27.187 回答
0

您不应使用 中的值elem.style.*来确定元素的大小。这些值是 CSS 样式，并不可靠。仅使用offsetWidth和offsetHeight。

要获取元素的位置，请使用以下问题的答案：Retrieve the position (X,Y) of an HTML element

于 2010-01-12T14:29:41.863 回答