(Updated: )
/ #javascript #react #vuejs 

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).

Table of Contents

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>
);

See it working at cmd-ctrl-click-react.netlify.com.

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>`
})

See it working at cmd-ctrl-click-vue.netlify.com.

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

unsplash-logoAdro Rocker

Author

Hugo Di Francesco

Co-author of "Professional JavaScript", "Front-End Development Projects with Vue.js" with Packt, "The Jest Handbook" (self-published). Hugo runs the Code with Hugo website helping over 100,000 developers every month and holds an MEng in Mathematical Computation from University College London (UCL). He has used JavaScript extensively to create scalable and performant platforms at companies such as Canon, Elsevier and (currently) Eurostar.

Get The Jest Handbook (100 pages)

Take your JavaScript testing to the next level by learning the ins and outs of Jest, the top JavaScript testing library.