Which key does the e.metaKey refer to in JavaScript MouseEvent?

问题

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

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?

回答1:

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

回答2:

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 " : ""));
  });