/ #javascript #react 

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

Looking for a new job? Take Triplebyte’s quiz and have top tech companies pitch you!

Author

Hugo Di Francesco

A Software Engineer who is big on Node.js, queues and Vue(s). Co-author of "Professional JavaScript" with Packt. He shares practical JavaScript tips for the developer who wants to get things done on Code with Hugo. University College London (UCL), MEng Mathematical Computation Graduate.

Get Testing Superpowers with these Underused Jest Features

Subscribe for free resources that turbocharge your Jest tests and a discount on the "Advanced Jest Handbook"