Check Ctrl / Shift / Alt keys on 'click' event

javascript

event-handling

keyboard-events

browser-inconsistencies

byAnton Shumikhin·Feb 1, 2025

When you need to detect the Ctrl, Shift, or Alt keys during a click event, the event object's ctrlKey, shiftKey, and altKey boolean properties are your best friends.

Here's a quick taster:

document.addEventListener('click', (event) => {
  console.log(`Ctrl: ${event.ctrlKey}, Shift: ${event.shiftKey}, Alt: ${event.altKey}`);
});

This will log a boolean value indicating whether Ctrl, Shift, or Alt was pressed during a click.

Detecting left or right modifier keys

In some cases, it's meaningful to know which side of the keyboard was the modifier key pressed. Let us see how to discern using properties like event.ctrlLeft or event.altLeft. However, remember, full cross-browser support is no guarantee. It's like expecting all your favorite ice cream flavors in one shop.

document.addEventListener('click', (event) => {
  if (event.ctrlKey) {
    var side = event.ctrlLeft ? 'left' : 'right';
    console.log(`Ctrl-${side} was pressed, like a boss!`);
  }
});

Combat default behavior

Sometimes, you want to prevent the browser's default actions on certain key combinations. The event.preventDefault() function is our hero in such times.

document.addEventListener('click', (event) => {
  if (event.ctrlKey) {
    // Pressing Ctrl during click? Not on my watch!
    event.preventDefault();
    console.log('Browser shortcuts, meet my buddy, preventDefault.');
  }
});

Enhanced event handling with jQuery

If leaning towards jQuery, favor .on() over .bind() for better event handling, like upgrading from instant coffee to your favorite local cafe.

$(document).on('click', (event) => {
  if (event.shiftKey) {
    console.log('Shift key played along with click. Party time!');
  }
});

Browser inconsistencies: A minor hiccup

Despite uniformly detecting modifier keys, tidbits of variations between browsers and operating systems can pop up. It's like different dialects in a broad language family. For instance, on Macs, metaKey may replace ctrlKey. Adjust your dialect accordingly!

document.addEventListener('click', (event) => {
  const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
  const ctrlOrCmd = isMac ? event.metaKey : event.ctrlKey;
  console.log(`Ctrl on Windows or Cmd on Mac?: ${ctrlOrCmd}`);
});

Caveats in the carnival

When capturing modifier keys on click events, there are limitations. Simultaneous presses of Ctrl + Alt + Shift are treated same as single or dual presses. When your requirements grow complex, consider separate keyboard event handlers.

Feedback communication

In the realm of UX, communication is king. Your users would appreciate knowing their keypresses are being detected, or if they hit the wrong key. Remember, nobody likes being left hanging.

document.addEventListener('click', (event) => {
  if (event.ctrlKey && event.altKey) {
    showMessage('Ctrl + Alt detected! You just unlocked secret combo!');
  }
});