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

คำอธิบาย

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

ความแตกต่างระหว่าง screenX, clientX, pageX

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

<!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>

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

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

ตัวอย่างการใช้ screenX กับ Context Menu แบบกำหนดเอง

<!DOCTYPE html>
<html>
<body>
  <div id="area" style="width:300px;height:200px;background:#eee;border:1px solid #999;">
    คลิกขวาที่นี่
  </div>
  <div id="customMenu" style="display:none; position:fixed; background:white; border:1px solid #ccc; padding:5px; box-shadow:2px 2px 5px rgba(0,0,0,0.2);">
    <div onclick="alert('Menu 1')" style="padding:5px 10px; cursor:pointer;">เมนู 1</div>
    <div onclick="alert('Menu 2')" style="padding:5px 10px; cursor:pointer;">เมนู 2</div>
  </div>

  <script>
    var area = document.getElementById("area");
    var menu = document.getElementById("customMenu");

    area.addEventListener("contextmenu", function(e) {
      e.preventDefault(); // กันเมนูเดฟอลต์
      menu.style.left = e.screenX + "px";
      menu.style.top = e.screenY + "px";
      menu.style.display = "block";
    });

    document.addEventListener("click", function() {
      menu.style.display = "none";
    });
  </script>
</body>
</html>

หมายเหตุ

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