1

ページ内のすべての固定リンクの位置、高さ、幅を計算する必要があります。x、y座標を見つける方法は知っていますが、高さと幅に問題があります. この問題は、リンクの内部に子 (画像、div など) がある場合に発生するため、heightOffset と widthOffset は機能しません。すべての子に行ってサイズを計算せずにこれを行う方法はありますか?

編集：

私が何を意味するかを示すコードを次に示します (マウスが押されるたびにプレス関数が呼び出されます)。

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画像やその他の子コンテンツをオーバーフローさせたり、親のコンテンツ領域からはみ出すように配置したりするような奇妙なことをしていない限り、画像を含むリンクで非常に多くの作業を行います。

あなたのコードはoffsetHeightIE では使用されpixelHeightていません。固執しoffsetHeightます。

逆に、IE にはない非標準の拡張機能であるevent.pageX/を使用しています。Y残念ながら、イベントからページ相対座標を取得する唯一の信頼できる方法は、clientX/を使用Yしてビューポートのスクロールを調整することです。

event.targetマウスのクリック/ダウンイベントの場合、 /を使用してクリックされた要素を確実に取得できるのに、リンク位置を列挙する努力をする理由がよくわかりませんsrcElement。実際、これが信頼できる唯一の方法です。2 つのテキスト行に分割されたリンクを考えてみましょう。これで、長方形ではない領域ができました。単純な x および y 範囲テストを使用して、特定のマウス位置がその領域内にあるかどうかをテストすることはできません。

于 2010-01-12T14:28:57.310 に答える
0

の値を使用しelem.style.*て要素のサイズを決定しないでください。これらの値は CSS スタイルであり、信頼できません。とのみoffsetWidthを使用してくださいoffsetHeight。

要素の位置を取得するには、次の質問への回答を使用してください: HTML 要素の位置 (X,Y) を取得する

于 2010-01-12T14:29:41.863 に答える
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 に答える