บทบาทของ ctrlKey Mouse Event ใน JavaScript

Property event.ctrlKey ใน Mouse Event บอกว่า ปุ่ม Ctrl ถูกกดค้างอยู่หรือไม่ ขณะที่ Mouse Event เกิดขึ้น

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

<!DOCTYPE html>
<html>
  <body onmousedown="funcCtrlKey(event)">
    <div>Press and hold CTRL key and then click here.</div>
    <script>
      function funcCtrlKey(event) {
        if (event.ctrlKey) {
          alert("CTRL key: Pressed");
        } else {
          alert("CTRL key: NOT Pressed");
        }
      }
    </script>
  </body>
</html>

คำอธิบาย

• event.ctrlKey — Boolean: true = กดค้าง, false = ไม่ได้กด
• ทำงานกับ Mouse Events ทั้งหมด: click, mousedown, mouseup, mousemove, dblclick, contextmenu
• บน Mac: Command (⌘) Key = ctrlKey = true (Browser Map ให้)

Modifier Keys ใน Mouse Events

การใช้งานจริง

• Multi-select: Ctrl+Click = Toggle Selection
• Open in New Tab: Ctrl+Click Link (Browser Default)
• Copy vs Move: Ctrl+Drag = Copy, Drag = Move
• Custom Shortcuts: if (e.ctrlKey && e.key === 's') (Keyboard Event)

ตัวอย่าง: Multi-select List

const list = document.getElementById('list');
list.addEventListener('click', (e) => {
  const item = e.target.closest('.item');
  if (!item) return;
  
  if (e.ctrlKey || e.metaKey) {
    // Ctrl/Cmd + Click: Toggle
    item.classList.toggle('selected');
  } else if (e.shiftKey) {
    // Shift + Click: Range Select
    selectRange(lastSelected, item);
  } else {
    // Normal Click: Single Select
    list.querySelectorAll('.selected').forEach(el => el.classList.remove('selected'));
    item.classList.add('selected');
  }
  lastSelected = item;
});