คุณสมบัติ screenY ของ Mouse Event ใน JavaScript คืออะไร?

คำอธิบาย

คุณสมบัติ screenY ของ Mouse Event คืนค่า พิกัดแนวตั้ง (Y) ของตัวชี้เมาส์ **เทียบกับมุมซ้ายบนของหน้าจอ (Screen)** หน่วยเป็นพิกเซล (pixels)

ความแตกต่างระหว่าง screenY, clientY, pageY

ตัวอย่างโค้ดแสดงพิกัดทั้งสามค่า

<!DOCTYPE html>
<html>
<head>
  <style>
    #target {
      width: 400px;
      height: 300px;
      background: #f5f5f5;
      border: 2px solid #333;
      margin: 20px auto;
      padding: 20px;
      font-family: monospace;
    }
    .coord { margin: 5px 0; }
  </style>
</head>
<body>
  <p style="text-align:center;">คลิกที่กล่องด้านล่างเพื่อดูพิกัด</p>
  <div id="target" onclick="showCoords(event)">
    <div class="coord">screenX: - | screenY: -</div>
    <div class="coord">clientX: - | clientY: -</div>
    <div class="coord">pageX: - | pageY: -</div>
  </div>

  <script>
    function showCoords(event) {
      document.getElementById("sx").textContent = event.screenX;
      document.getElementById("sy").textContent = event.screenY;
      document.getElementById("cx").textContent = event.clientX;
      document.getElementById("cy").textContent = event.clientY;
      document.getElementById("px").textContent = event.pageX;
      document.getElementById("py").textContent = event.pageY;
    }
  </script>
</body>
</html>

กรณีการใช้งาน screenY

• จัดตำแหน่ง Popup/Tooltip/Context Menu ให้อยู่ใกล้เมาส์บนหน้าจอจริง
• คำนวณตำแหน่งสำหรับ Drag & Drop ข้ามหน้าต่าง (cross-window)
• ตรวจสอบว่ามีเมาส์อยู่ในพื้นที่หน้าจอไหน (Multi-monitor setup)
• Debugging ตำแหน่งเมาส์สัมพัทธ์กับฮาร์ดแวร์

หมายเหตุ

• screenY เป็นค่า Read-only
• ค่าอาจเป็นลบได้ หากเมาส์อยู่นอกพื้นที่หน้าจอหลัก (เช่นหน้าจอที่ 2 อยู่ด้านซ้าย)
• รองรับในทุกเบราว์เซอร์สมัยใหม่ (IE9+)