Để lập trình một số hành động theo chuyển động của con trỏ trong cửa sổ trình duyệt, đôi khi cần phải xác định tọa độ của nó. Điều này có thể được thực hiện bởi một tập lệnh có khả năng theo dõi các sự kiện xảy ra trong trình duyệt. Tập lệnh JavaScript phía máy khách có khả năng này. Dưới đây là mô tả một trong những tùy chọn để lấy tọa độ của con trỏ bằng cách sử dụng các khả năng của ngôn ngữ này.
Hướng dẫn
Bước 1
Sử dụng các thuộc tính của đối tượng sự kiện để lấy tọa độ hiện tại của con trỏ. Đối tượng này có một tập hợp toàn bộ các thuộc tính có liên quan đến việc xác định tọa độ của con trỏ chuột. Thuộc tính LayerX chứa khoảng cách được đo bằng pixel từ cạnh trái của lớp hiện tại và LayerY - cùng khoảng cách từ cạnh trên cùng của nó. Hai thuộc tính này có các từ đồng nghĩa - thay vì event. LayerX, bạn có thể viết event.x và thay vì event. LayerY, bạn có thể viết event.y. Thuộc tính pageX và pageY giữ các tọa độ ngang và dọc của con trỏ so với mép trên bên trái của cửa sổ trình duyệt và các thuộc tính screenX và screenY giữ các giá trị tương tự so với màn hình điều khiển.
Bước 2
Thêm kiểm tra loại trình duyệt vào mã của bạn và sử dụng các thuộc tính clientX và clientY ngoài các thuộc tính trên trên đối tượng sự kiện. Điều này là cần thiết vì Microsoft sử dụng ký hiệu thuộc tính khác trong trình duyệt Internet Explorer của mình. Bạn có thể kết hợp cả hai cách tiếp cận để xác định tọa độ, chẳng hạn như sau:
if (evevnt.pageX || evevnt.pageY) {
toạ độX = evevnt.pageX;
tọa độY = evevnt.pageY;
}
else if (evevnt.clientX || evevnt.clientY) {
toạ độX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
phối hợpY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
Bước 3
Đặt mã định nghĩa tọa độ trong một hàm tùy chỉnh. Ví dụ:
function GetMouse (evevnt) {
var toạ độX = 0, toạ độY = 0;
if (! evevnt) evevnt = window.event;
if (evevnt.pageX || evevnt.pageY) {
toạ độX = evevnt.pageX;
tọa độY = evevnt.pageY;
}
else if (evevnt.clientX || evevnt.clientY) {
toạ độX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
phối hợpY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
return {"coordX": toạ độX, "coordY": toạ độY};
}
Hàm này trả về một mảng gồm hai phần tử được đặt tên, phần tử đầu tiên (với khóa coordX) chứa tọa độ X và phần tử thứ hai (coordY) chứa tọa độ Y.
Bước 4
Gọi hàm này trên một số sự kiện - ví dụ: trên sự kiện di chuyển chuột (onmousemove) trong ngữ cảnh tài liệu. Mẫu bên dưới sử dụng một hàm để xuất tọa độ chuột vào thanh trạng thái:
document.onmousemove = function (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "coord X:" + CurCoord.coordX + "px, coord Y:" + CurCoord.coordY + "px";};
