獲取當前點擊座標相對於一個元素

Question

我有一個函數來獲取最近點擊的位置相對於div元素的座標，而不使用JQuery，它工作正常。

沒有jQuery的（工作）：

var Board = document.getElementById("board"); // div element 

function mouseListener(e) 
{ 
    var posX = e.clientX - Board.getBoundingClientRect().left, 
     posY = e.clientY - Board.getBoundingClientRect().top 
    console.log(posX+" : "+posY); 
} 

window.addEventListener("mousedown", mouseListener,false); 

但是這一次用了jQuery和使用jquery相比之前的代碼

給予不同的座標（不工作）：

var Board = $("#board"); 

function mouseListener(e) 
{ 
    var posX = e.clientX - Number(Board.css("left").replace("px", "")), 
     posY = e.clientY - Number(Board.css("top").replace("px", "")); 
    console.log(posX+" : "+posY); 
} 

$(window).mousedown(mouseListener); 

如何在jQuery上正確寫入，以便它能夠像第一個代碼一樣工作？

Answer 1

使用jQuery，你必須使用.offset()得到相同的價值觀與.getBoundingClientRect()：

function mouseListener(e) { 
    var posX = e.clientX - parseFloat(Board.offset().left), 
     posY = e.clientY - parseFloat(Board.offset().top); 
    console.log(posX+" : "+posY); 
} 

jQuery.fn.offset() Reference here;

有三種方法來附加事件處理程序。使用jQuery中< 1.7，但在新版本中仍然工作：

$(window).bind('mousedown', mouseListener); 

在jQuery 1.7方法.on()的使用，它具有最大的靈活性也爲事件代表團：

$(window).on('mousedown', mouseListener); 

第三個就是你已經使用，它只是一個快捷方式，並在內部調用.on()。

Reference jQuery.fn.bind() - - - - Reference jQuery.fn.on()

Answer 2

無論你做什麼都是絕對正確的logicwise，只是輕微的語法錯誤。

var Board = $("#board"); 

function mouseListener(e) 
{ 
    var posX = e.clientX - Number(Board.css("left").replace("px", "")),  //you forgot to put closing braces here and in the next line. 
    posY = e.clientY - Number(Board.css("top").replace("px", "")); 
    console.log(posX+" : "+posY); 
} 

$(window).mousedown(mouseListener); 

確保你已經使用風格左頂部ID爲「#board」的元素否則輸出將爲NaN：NaN的。