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

บทนำ

คุณสมบัติ shiftKey ของ Mouse Event ใช้ตรวจสอบว่า Shift ถูกกดค้างอยู่ในขณะที่เกิดเหตุการณ์เมาส์ (click, mousedown, mouseup, mousemove, dblclick, contextmenu, เป็นต้น) คืนค่า true หากกดอยู่ และ false หากไม่ได้กด

ความแตกต่างจาก Keyboard Event

• Keyboard Event shiftKey: ตรวจสอบระหว่างกดแป้นพิมพ์
• Mouse Event shiftKey: ตรวจสอบระหว่างคลิก/ลากเมาส์

ทั้งคู่ใช้ชื่อคุณสมบัติเดียวกัน (event.shiftKey) แต่มาจากอินเทอร์เฟซเหตุการณ์ที่ต่างกัน

ตัวอย่างการใช้งาน

คลิกที่พื้นที่ด้านล่างขณะกด Shift ค้างเพื่อทดสอบ:

<!DOCTYPE html>
<html>
<body>
  <div id="clickArea" style="width:300px; height:150px; background:#f0f0f0; border:2px dashed #999; display:flex; align-items:center; justify-content:center; cursor:pointer; margin-bottom:10px;" onmousedown="funcShiftKey(event)">
    กด Shift ค้าง + คลิกที่นี่
  </div>
  <div id="result" style="font-weight:bold; font-size:1.2rem;">ผลลัพธ์จะแสดงที่นี่</div>

  <script>
    function funcShiftKey(event) {
      var result = document.getElementById("result");
      if (event.shiftKey) {
        result.innerHTML = "Shift: กดอยู่ (event.shiftKey = true)";
      } else {
        result.innerHTML = "Shift: ไม่ได้กด (event.shiftKey = false)";
      }
    }
  </script>
</body>
</html>

กรณีการใช้งานจริง (Use Cases)

• Multi-select: กด Shift + คลิก เพื่อเลือกช่วงไอเท็ม (เช่นในไฟล์เอกสาร, ตาราง)
• ปรับพฤติกรรม Drag & Drop: กด Shift เพื่อล็อกแกน X หรือ Y
• Context Menu ปรับแต่ง: แสดงเมนูต่างกันเมื่อ Shift+Right-click
• เกม/แอปพลิเคชันแบบวาด: กด Shift เพื่อวาดเส้นตรงหรือรูปทรงสมมาตร

คุณสมบัติ Modifier Keys อื่นๆ ใน Mouse Event