Trong JavaScript:
pageX, pageY, screenX, screenY, clientX, Và clientYtrả về một số trong đó cho biết số vật lý “pixel CSS” một điểm là từ điểm tham chiếu. Điểm sự kiện là nơi người dùng nhấp vào, điểm tham chiếu là một điểm ở phía trên bên trái. Các thuộc tính này trả về khoảng cách ngang và dọc từ điểm tham chiếu đó.
pageXvà pageY:
Liên quan đến phía trên bên trái của khu vực nội dung được hiển thị đầy đủ trong trình duyệt. Điểm tham chiếu này nằm dưới thanh URL và nút quay lại ở phía trên bên trái. Điểm này có thể là bất cứ nơi nào trong cửa sổ trình duyệt và thực sự có thể thay đổi vị trí nếu có các trang có thể cuộn được nhúng trong các trang và người dùng di chuyển một thanh cuộn.
screenXvà screenY:
Liên quan đến phía trên bên trái của màn hình / màn hình vật lý, điểm tham chiếu này chỉ di chuyển nếu bạn tăng hoặc giảm số lượng màn hình hoặc độ phân giải màn hình.
clientXvà clientY:
Liên quan đến cạnh trên bên trái của khu vực nội dung ( khung nhìn ) của cửa sổ trình duyệt. Điểm này không di chuyển ngay cả khi người dùng di chuyển một thanh cuộn từ bên trong trình duyệt.
Đối với một hình ảnh mà trình duyệt hỗ trợ các thuộc tính:
http://www.quirksmode.org/dom/w3c_cssom.html#t03
w3schools có trình thông dịch và trình soạn thảo Javascript trực tuyến để bạn có thể xem những gì từng làm
http://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy
<!DOCTYPE html>
<html>
<head>
<script>
function show_coords(event)
{
var x=event.clientX;
var y=event.clientY;
alert("X coords: " + x + ", Y coords: " + y);
}
</script>
</head>
<body>
<p onmousedown="show_coords(event)">Click this paragraph,
and an alert box will alert the x and y coordinates
of the mouse pointer.</p>
</body>
</html>
