1

要素内にあるときにマウスの位置を表示したい..コードは次のとおりです。




マウス イベントの例


 関数 GetMousePositionInElement(ev, 要素)
           {
               var osx = element.offsetX;
               var osy = element.offsetY;

               var ボトム = osy + element.height();

               var x = ev.pageX - osx;
               var y = ボトム - ev.pageY;

               return { x: x, y: y, y_fromTop: element.height() - y };
           }
    関数 handleEvent(oEvent) {
        var oTextbox = document.getElementById("txt1");
        var elem = document.getElementById("div1");
        var xp = GetMousePositionInElement(oEvent, elem).x;
        var yp = GetMousePositionInElement(oEvent, elem).y;

        oTextbox.value += "\nx = " + xp + "y= " + yp;

    }




マウスを使用して赤い四角をクリックし、ダブルクリックします。

div style="幅: 100px; 高さ: 100px; 背景色: 赤"
     onmouseover="handleEvent(イベント)"
     id="div1"> /div

textarea id="txt1" rows="15" cols="50"> /textarea>

コードに問題があります。マウスの位置は texArea 内に表示されません。コードが機能し、正しく機能するためには、どのような変更を加える必要がありますか? (もちろん、すべてのコードが表示されるわけではありません。< と > の一部を削除して、他の方法では表示されないコードの一部を表示しましたが、コードの構文は正しいです。それは問題ではありません)

ありがとうございました。

4

1 に答える 1

1

var osy = element.offsetY;

のようなプロパティはありませんoffsetY。を考えているかもしれませんoffsetTop。ただし、offsetLeft/ <code>Top の値はページではoffsetParentなく相対的なものであることに注意してください。ページ相対座標が必要な場合は、offsetParents をループするか、jQuery を含めているように見えるので、それを行うオフセット関数を呼び出します。

var offset= $(element).offset();
var osx= offset[0], osy= offset[1];

var ボトム = osy + element.height();

elementは jQuery ラッパー オブジェクトではなく DOM HTMLDivElement オブジェクトであるため、メソッドはありませんheight()。ラッパーを追加するか:

var bottom= osy+$(element).height();

または同等の DOM メソッドを使用します。

var bottom= osy+element.offsetHeight;

var y = ボトム - ev.pageY;

NotepageYは DOM Events 標準の一部ではなく、IE でも使用できません。clientY標準プロパティを使用し、ページの を調整することで計算できますscrollTop。pageY繰り返しますが、jQuery はこれを行い、独自のメソッドを使用してイベント ハンドラーをバインドすると、すべてのブラウザーにFirefox 拡張機能を追加します。

$('#div1').mouseover(handleEvent);

インラインonmouseover=...イベント ハンドラー属性の代わりに。

于 2009-12-02T21:34:12.547 に答える