0

レコードが少ないテーブルがあり、ユーザーが特定のレコードの上にマウスを置いたときにポップアップ ボックスを表示する必要があります。

ポップアップ ボックスを作成し、そこにメッセージを設定しました。残っている唯一のことは、そのボックス ( ) の座標を設定して、<div id="popup"></div>このボックスをトリガーする要素の隣に配置することです。

それで、thisマウスオーバーしたタグの を取得しました。ウィンドウ上のその位置を取得するにはどうすればよいですか?

私は試しthis.offsetLeftてみましたが、それは親に相対的です。要素はインラインなので、見つける方法がわかりません。

私は純粋な JavaScript を使用していますが、このプロジェクトでは使用したくないため、jQuery を提案しないでください。

4

2 に答える 2

1

offsetParent要素のを再帰的に調べて値を取得し、offsetLeftそれらを要素自身の に追加することができますoffsetLeft。

このような何かがうまくいくはずです：

function offsetLeftRelativeToPage(element) {
    var offset = element.offsetLeft;
    var offsetParent = element.offsetParent;
    if (offsetParent != null) {
        offset += offsetLeftRelativeToPage(offsetParent);
    }
    return offset;
}

var trigger = document.getElementById('trigger');
var popup = document.getElementById('popup');

trigger.onmouseover = function() {
    var offsetLeft = offsetLeftRelativeToPage(this);
    popup.style.left = offsetLeft;
}

JSFiddle デモ: jsfiddle.net/e6vWV/

于 2012-08-07T21:31:06.813 に答える