10

本体内の親要素ではなく、ブラウザ/本体に対するマウスクリックの絶対位置（上下）を取得しようとしています。

リスナーが本体にバインドされていますが、e.pageXとe.pageYがdivに対する相対的な位置を示しています。

jQueryとYUI関数を活用できることに注意してください。

現在正しく機能していないコード：

//getting the position
function _handleClick(e) {
    var data = { absX: e.pageX, absY: e.pageY};
    _logClickData(data);
}

//binding the function
var methods = {
    init: function () {
        $("body").click(_handleClick);
    }
};
4

5 に答える 5

9

コメント投稿者は正しいです。pageXとpageYは、親divではなく、ドキュメント全体に対するマウスの位置を示します。ただし、興味がある場合は、divに相対的な位置からドキュメントに相対的な位置を取得できます。

本体に対する親divの位置を取得し、2つの値を追加します。

x = parentdiv.style.left + e.pageX;
y = parentdiv.style.top + e.pageY;



(0,0)
_____________________
|
|
|            __________
|----100----|          |
|           |---60---* |
|           |__________|
|
|
        * = Mouse Pointer

楽しかったので図を作りました。必要だと思ったからではありません!!

また、上記を機能させるには、parseIntが必要になる場合があります。

于 2011-07-08T19:54:40.310 に答える
5

これ（http://docs.jquery.com/Tutorials:Mouse_Position）によると、それらは絶対的な位置を与えるはずです。offsetX/Yあなたに相対的な位置を与えます。

2013年11月の編集：元の「マウスの位置」リンクが壊れているようですが、のドキュメントにpageXpageXはjQuery /を利用した例が含まれていますY。メソッドに関するページには、offset関連する例も含まれています。

于 2011-07-08T20:39:45.173 に答える
4

私があなたの質問をよく理解していれば、これが解決策になるでしょう

 $("body").click(function(e){
   var parentOffset = $(this).offset(); 
   var relX = e.pageX - parentOffset.left;
   var relY = e.pageY - parentOffset.top;

   window.alert(relX);
   window.alert(relY);
});
于 2017-12-11T07:53:22.490 に答える
3

window.pageXOffset、window.pageYOffsetプロパティを使用できると思います

document.body.addEventListener('click',(e)=>{
  console.log(e.clientX + window.pageXOffset, event.clientY + window.pageYOffset)
  }
)
于 2019-10-23T14:46:15.183 に答える
0

@Mrchiefのhttp://docs.jquery.com/Tutorials:Mouse_Positionのリンクによって示唆された解決策は、body要素ではなく、ドキュメントにバインドすることでした。

//binding the function
var methods = {
    init: function () {
        $(document).click(_handleClick);
    }
};
于 2011-07-08T20:39:36.233 に答える