[jQuery] 取得滑鼠位置、元素位置與區塊內的相對位置

標籤: jQuery javascript

要取得滑鼠在頁面裡的位置,在 js 裡面可以使用 pageX 和 pageY,因為這是滑鼠事件所以我們可以在滑鼠事件觸發的時候偵測像這樣:

$("html").mousemove(function(e){
  console.log(e.pageX+", "+e.pageY)
})

 

接著如果要知道某個區塊在頁面上的位置,在 jQuery 可以使用 .offset(),會回傳一個物件分別有 left 和 top 的值像這樣:

$('#block').click(function (e) { /
        var posX = $(this).offset().left,
            posY = $(this).offset().top;
      console.log(posX+", "+posY)
 });

 

緊接著如果我們想知道滑鼠在某個區塊裡的相對位置,這個可能會用在使用 position 定位時,就可以用這種方法偵測位置:

$('#something').click(function (e){
    var elm = $(this);
    var xPos = e.pageX - elm.offset().left;
    var yPos = e.pageY - elm.offset().top;
    console.log(xPos, yPos);
});