JavaScript: найти абсолютный размер привязанной ссылки

Question

Мне нужно рассчитать положение, высоту и ширину каждой привязанной ссылки на моей странице. Я знаю, как найти координаты x, y, но у меня проблема с высотой и шириной. Проблема возникает, когда внутри ссылки есть дочерние элементы (изображения, div и т. Д.), Поэтому высота и ширина не будут работать. Есть ли способ сделать это без участия всех детей и расчета их размеров?

EDIT:

Вот код, демонстрирующий, что я имею в виду (функция нажатия вызывается при каждом нажатии мыши):

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 очень много работают над ссылками, содержащими изображения, если вы не сделали ничего странного, например, переполнения или позиционирования изображений или другого дочернего содержимого, чтобы они выпадали из области содержимого их родитель.

Ваш код не использует offsetHeight в IE, он использует pixelHeight, который не делает то, что, возможно, вы думаете, что он делает. Палка с offsetHeight.

И наоборот, вы используете event.pageX / Y, который является нестандартным расширением, которое IE не имеет. К сожалению, единственный надежный способ получить координаты страницы относительно события - это использовать clientX / Y и настроить прокрутку области просмотра.

Я действительно не знаю, зачем вы пытаетесь перечислить позиции ссылок, когда для события щелчка мышью / вниз вы можете достаточно надежно получить элемент, по которому щелкнули, используя event.target / srcElement. На самом деле это единственный надежный способ сделать это. Рассмотрим ссылку, которая разделена на две строки текста. Теперь у вас есть непрямоугольная область; Вы не можете проверить, находится ли конкретная позиция мыши в этой области, с помощью простого теста диапазона x и y.

Answer 2

Не следует использовать значения в elem.style.* для определения размера элемента. Эти значения являются стилями CSS и не являются надежными. Используйте только offsetWidth и offsetHeight.

Чтобы получить позицию элемента, используйте ответы на этот вопрос: Получить позицию (X, Y) элемента HTML

Answer 3

Правильные свойства: 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.