Làm thế nào để có được vị trí tuyệt đối của một cú click chuột từ một sự kiện onClick trên cơ thể?

Question

Tôi đang cố gắng để có được vị trí tuyệt đối (trên cùng và bên trái) của một cú click chuột liên quan đến trình duyệt/cơ thể, không bất kỳ phần tử gốc nào trong nội dung.

Tôi có trình nghe bị ràng buộc với phần thân, nhưng e.pageX và e.pageY đang cho tôi vị trí tương đối so với div.

Lưu ý rằng tôi có thể tận dụng các hàm jQuery và YUI.

Mã hiện không hoạt động chính xác:

//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); 
    } 
}; 

Answer 1

Theo điều này (http://docs.jquery.com/Tutorials:Mouse_Position), những thứ này sẽ cho bạn vị trí tuyệt đối. offsetX/Y cung cấp cho bạn vị trí tương đối.

Sửa tháng 11 năm 2013: bản gốc "Chuột Chức vụ" liên kết dường như bị phá vỡ, nhưng the documentation for pageX chứa một ví dụ sử dụng jQuery pageX/Y. page about the offset method cũng chứa các ví dụ có liên quan.

Answer 2

Các commenter là đúng. pageX và pageY cung cấp cho bạn vị trí chuột liên quan đến toàn bộ tài liệu chứ không phải là div cha của nó. Nhưng nếu bạn quan tâm, bạn có thể nhận được vị trí liên quan đến tài liệu từ vị trí tương đối so với div.

Lấy vị trí của div mẹ tương đối so với phần thân, sau đó thêm hai giá trị.

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



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

Tôi đã tạo biểu đồ vì nó thật thú vị. Không phải vì tôi cảm thấy bạn cần một cái !!

Ngoài ra, để làm việc ở trên, bạn có thể cần phải phân tích cú pháp.

Answer 3

Giải pháp, được gợi ý bởi liên kết của @ Mrchief là http://docs.jquery.com/Tutorials:Mouse_Position, là liên kết với tài liệu chứ không phải phần tử nội dung.

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

Answer 4

Nếu tôi hiểu câu hỏi của bạn tốt này sẽ là giải pháp

$("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); 
});