Login/Register
Which key does the e.metaKey refer to in JavaScript MouseEvent?
Asked Answered
javascriptbrowsermouseeventdom-eventskeycode
L

3

22

MouseEvent.metaKey doesn't seem to work. On both FireFox and Chrome, it returns false even if I hold the Win key while clicking:

<!doctype html>
<button onclick=alert(event.metaKey)>click while holding "meta key"</button>

MDN states:

The MouseEvent.metaKey read-only property returning a Boolean that indicates if the Meta key was pressed (true) or not (false) when the event occured.

Note: On Macintosh keyboards, this is the command key (⌘). On Windows keyboards, this is the windows key (⊞).

Browser Compatibility

enter image description here

MDN claims MouseEvent.metaKey is supported on FireFox and Chrome, but it's not working.

Which key does MouseEvent.metaKey refer to?

Why is the above code not working?

Lor answered 5/6, 2011 at 21:6 Comment(0)
S
12

If you're asking which key you would have to press on a Windows system in order for the MouseEvent's metaKey property to be true, the answer is that it depends on the browser. And some Windows browsers simply don't support it and always return false or undefined.

I could not find an up-to-date chart of browser support for metaKey, though there is a really old one at QuirksMode.org.

If you are using jQuery, metaKey is one of the event properties that it normalizes for cross-browser compatibility.

If you need to implement a key + mouse event for some functionality on your website, I would use the Shift key, so that it works on all systems. (If you need more than one key option, I would suggest you rethink your design.)

Sampan answered 6/6, 2011 at 0:23 Comment(1)
It's still not working. (Btw, I've updated the question.) – Lor
T
4

Empirical testing, shows the following results. Not that jQuery doesn't do a terribly good job of normalizing ^F.

On a Mac, in Safari Version 5.1.7 & 6.0.

 F   Keypress: 102, 102  
⌘F   Keypress: 102, 102  meta 
⌥F   Keypress: 402, 402  alt 
⌃F   Keypress: 6, 6  ctrl
⇧F   Keypress: 70, 70  shift

On a Mac, in Firefox 15.0.1:

 F   Keypress: 102, 0
⌘F   Keypress: 102, 0 meta 
⌥F   Keypress: 402, 0 alt
⌃F   Keypress: 102, 0 ctrl
⇧F   Keypress: 70, 0 shift

On a Mac, in Google Chrome 18.0.1024.168:

 F   Keypress: 102, 102
⌘F   (No triggers sent for ⌘ + key)
⌥F   Keypress: 402, 402 alt
⌃F   Keypress: 6, 6 ctrl
⇧F   Keypress: 70, 70 shift

Test code: // jquery-1.7.2

  $(document.defaultView).keypress(function(e) {
      console.log("Keypress: " + e.which + ", " + e.keyCode, " "
          + (e.metaKey ? "meta " : "")
          + (e.ctrlKey ? "ctrl " : "")
          + (e.altKey ? "alt " : "")
          + (e.shiftKey ? "shift " : ""));
  });
Type answered 9/10, 2012 at 13:26 Comment(3)
Still doesn't seem to work. Did you actually manage to get the value as true? – Lor
@Lor - My tests were with the keypress event, not a mouse event, my bad. – Type
@Lor - Some testing with Chrome on OS X show the same results as I specified for Safari, metaKey is set when ⌘ is depressed. – Type
B
1

Which key does MouseEvent.metaKey refer to?

It refers to the windows key Windows Key

Why is the above code not working?

Because of a bug as of at least Firefox 48, see the docs for more infos.

A solution :

Use the shiftKey instead. Which has a property with the same name on the event object.

Bunton answered 19/8, 2017 at 18:17 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.