การหาพิกัดเมาส์เทียบกับหน้าจอใน JavaScript

คุณสมบัติ screenX และ screenY

ใน JavaScript สามารถหาพิกัดของเคอร์เซอร์ (เมาส์) เทียบกับ **มุมซ้ายบนของหน้าจอ** (screen) ได้ผ่านคุณสมบัติ event.screenX และ event.screenY ของอ็อบเจกต์ Event

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <script>
    function coordinatesFunc(event) {
      var x = event.screenX;
      var y = event.screenY;
      document.write("Coordinate(X) = " + x + "<br>Coordinate(Y) = " + y);
    }
  </script>
</head>
<body>
  <div onmousedown="coordinatesFunc(event)" style="padding: 20px; background: #f0f0f0; cursor: pointer;">
    คลิกที่นี่เพื่อดูพิกัดเมาส์เทียบกับหน้าจอ
  </div>
</body>
</html>

เปรียบเทียบพิกัดต่าง ๆ ใน Mouse Event

ตัวอย่างครบถ้วน: แสดงพิกัดทุกแบบ

<div id="target" style="width: 300px; height: 200px; background: #e0e0e0; margin: 50px;">
  คลิกหรือลากเมาส์ในพื้นที่นี้
</div>
<pre id="output"></pre>

<script>
  var target = document.getElementById("target");
  var output = document.getElementById("output");
  
  target.addEventListener("click", function(e) {
    var coords = [
      "screenX/Y: " + e.screenX + ", " + e.screenY,
      "clientX/Y: " + e.clientX + ", " + e.clientY,
      "pageX/Y: " + e.pageX + ", " + e.pageY,
      "offsetX/Y: " + e.offsetX + ", " + e.offsetY
    ].join("\n");
    output.textContent = coords;
  });
</script>

หมายเหตุ

• screenX/Y ไม่เปลี่ยนแปลงเมื่อเลื่อนหน้าจอ (scroll)
• ในการพัฒนา UI ทั่วไป ใช้ clientX/Y บ่อยกว่า
• รองรับในบราวเซอร์ทุกตัวรวมถึง IE9+