Menu
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.metaKeyread-only property returning aBooleanthat 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?
525
Definition and Usage. The metaKey property returns a Boolean value that indicates whether or not the "META" key was pressed when a key event was triggered. Not all keyboards have the meta key. It is common for Sun microsystem keyboards, and MIT and LISP machine keyboards.
The meta key is a key on some keyboards, normally located next to the spacebar, that performs special functions when combined with another key. It originated on keyboards for Lisp computers in the 1960s, and its use continued on Sun computers where the key was marked with a diamond shape.
The the meta key is key between the Ctrl and Alt keys on your keyboard. It may sometimes be called the windows key, logo key, system key, or even the Ubuntu key. If you have an Apple keyboard, there will not be a meta key on your keyboard. The Command (Cmd) key can be used instead.
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.)
58
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 " : ""));
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
