2014-05-19 16 views
16

Tôi có một thẻ div nhỏ khi tôi nhấp vào nó (onClick sự kiện), nó sẽ chạy hàm printMousePos(). Đây là HTML tags:javascript nhận tọa độ x và y khi nhấp chuột

<html> 
    <header> 
     <!-- By the way, this is not the actual html file, just a generic example. --> 
     <script src='game.js'></script> 
    </header> 
    <body> 
     <div id="example"> 
      <p id="test">x: , y:</p> 
     </div> 
    </body> 
</html> 

Đây là printMousePos chức năng trong một tập tin riêng biệt .js:

function printMousePos() { 
    var cursorX; 
    var cursorY; 
    document.onmousemove = function(e){ 
    cursorX = e.pageX; 
    cursorY = e.pageY; 
} 
    document.getElementById('test').innerHTML = "x: " + cursorX + ", y: " + cursorY; 
} 

Vâng, chức năng thực sự hoạt động (nó biết khi bạn nhấp vào nó và tất cả), nhưng nó trả về không xác định cho cả x và y, vì vậy tôi giả định rằng mã nhận được x và y trong hàm không chính xác. Bất kỳ ý tưởng? Tôi cũng biết không có bất kỳ được xây dựng trong các chức năng trong javascript chính nó để trở về x và y như trong java, cũ .. sẽ có một cách để làm điều đó với nói JQuery hay php? (tránh những người nếu có thể mặc dù, javascript sẽ là tốt nhất). Cảm ơn!

+0

'event.clientX' và' event.clientY' – Jonathan

+0

@ Jonathan tôi cố gắng đó, stil l trở lại undefined mặc dù. –

+1

CursorX và cursorY không xác định trước khi sự kiện di chuyển chuột được kích hoạt. Nếu bạn muốn vị trí từ sự kiện chuyển sự kiện nhấp chuột tới hàm printMousePos – Mathias

Trả lời

35

Như thế này.

function printMousePos(event) { 
 
    document.body.textContent = 
 
    "clientX: " + event.clientX + 
 
    " - clientY: " + event.clientY; 
 
} 
 

 
document.addEventListener("click", printMousePos);

MouseEvent - MDN

MouseEvent.clientX chỉ đọc
tọa độ x của con trỏ chuột ở địa phương (nội dung DOM) phối.

MouseEvent.clientY Chỉ đọc
Tọa độ Y của con trỏ chuột trong tọa độ cục bộ (nội dung DOM).

+2

Re: [pageX/Y so với clientX/Y] (http://www.bennadel.com/blog/1869-jquery-mouse-events-pagex -y-vs-clientx-y.htm) – Kylok

+0

Đây là câu trả lời đúng và cần được đánh dấu là –

3

Nghe có vẻ như chức năng printMousePos bạn nên:

  1. Lấy X và Y tọa độ của chuột
  2. Thêm những giá trị đó vào HTML

Hiện nay, nó thực hiện điều này:

  1. Tạo biến (không xác định) cho X và Y tọa độ của chuột
  2. Gắn một chức năng để sự kiện "MouseMove" (mà sẽ thiết lập các biến đến tọa độ chuột khi được kích hoạt bởi một di chuyển chuột)
  3. Thêm các giá trị hiện tại của các biến của bạn với HTML

Xem sự cố? Các biến của bạn không bao giờ được thiết lập, bởi vì ngay sau khi bạn thêm hàm vào sự kiện "mousemove" bạn in chúng.

Dường như bạn có thể không cần sự kiện di chuột đó; Tôi sẽ cố gắng một cái gì đó như thế này:

function printMousePos(e) { 
    var cursorX = e.pageX; 
    var cursorY = e.pageY; 
    document.getElementById('test').innerHTML = "x: " + cursorX + ", y: " + cursorY; 
} 

Sửa: Không nhận thấy bạn đã không đi qua bất kỳ lý lẽ để printMousePos(), cập nhật nó để printMousePos(e)

0

giải pháp đơn giản là thế này:

trò chơi .js:

document.addEventListener('click', printMousePos, true); 
function printMousePos(e){ 

     cursorX = e.pageX; 
     cursorY= e.pageY; 
     $("#test").text("pageX: " + cursorX +",pageY: " + cursorY); 
} 
Các vấn đề liên quan