Detect ctrl/cmd/alt/shift + Click in Vanilla JavaScript, React and Vue.js

Detecting control-click, command-click, meta-click, alt-click and shift-click in JavaScript without listening to keydown events is straightforward.

The naive approach is to bind aggressively to key events (keydown, keypress, keyup) and to maintain state of what is currently pressed using JavaScript.

That’s not necessary since MouseEvents have some keypress specific properties: metaKey, ctrlKey, altKey and shiftKey (see the corresponding pages on MDN, metaKey, ctrlKey, altKey and shiftKey).

All of metaKey, ctrlKey, altKey and shiftKey are booleans, which are true when the corresponding key is pressed.

A vanilla JavaScript click listener with command, control, alt and shift detection

The pseudocode for ctrl, command/windows (meta), alt and shift click detection is the following:

element.addEventListener('click', function (e) {
  console.log(e.shiftKey); // shift
  console.log(e.ctrlKey); // ctrl
  console.log(e.altKey); // alt
  console.log(e.metaKey); // command/windows (meta) key
});

Detect alt + click

Swap out document for the DOM element of your choice

document.addEventListener('click', function (e) {
  if (e.altKey) {
    console.log('With alt, do something...');
    return;
  }
});

Detect ctrl + click

Swap out document for the DOM element of your choice

document.addEventListener('click', function (e) {
  if (e.ctrlKey) {
    console.log('With ctrl, do something...');
    return;
  }
});

Detect shift + click

Swap out document for the DOM element of your choice

document.addEventListener('click', function (e) {
  if (e.shiftKey) {
    console.log('With shift, do something...');
    return;
  }
});

Detect ctrl or command + click

Swap out document for the DOM element of your choice

document.addEventListener('click', function (e) {
  if (e.ctrlKey || e.metaKey) {
    console.log('With ctrl or cmd or windows, do something...');
    return;
  }
});

React: control + click or command + click

const CmdControlClick = ({onCmdControlClick, onClick}) => (
  <button
    type="button"
    onClick={e => {
      if (e.ctrlKey || e.metaKey) return onCmdControlClick(e);
      onClick(e);
    }}
  >
    Click me
  </button>
);

Repository at github.com/HugoDF/command-control-click-react.

Vue.js: event modifiers for control/command, shift, alt + click

A ModifierClick component in Vue.js uses @click modifiers to detect regular clicks with @click.exact, alt-click with @click.alt, shift-click with @click.shift, command/control-click with @click.ctrl and @click.meta respectively.

The following works as a Single File Component.

<template>
  <button
    type="button"
    @click.exact="$emit('click')"
    @click.meta="$emit('cmdCtrl')"
    @click.ctrl="$emit('cmdCtrl')"
    @click.shift="$emit('shift')"
    @click.alt="$emit('alt')"
  >
    Click with modifier keys
  </button>
</template>

@click is shorthand for v-on:click so we could write the Vue.js click modifiers as v-on:click.meta, v-on:click.ctrl, v-on:click.shift, v-on:click.alt and v-on:click.exact.

Vue.component('inline-modifier-click', {
  template: `<button
    type="button"
    v-on:click.meta="$emit('cmdCtrl')"
    v-on:click.ctrl="$emit('cmdCtrl')"
    v-on:click.shift="$emit('shift')"
    v-on:click.alt="$emit('alt')"
    v-on:click.exact="$emit('click')"
  >
    Click with modifier keys (inline)
  </button>`
})

Repository at github.com/HugoDF/cmd-ctrl-click-vue.

Adro Rocker