JavaScript MouseEvent中的e.metaKey指的是哪个键?

21
MouseEvent.metaKey似乎不起作用。在FireFox和Chrome上,即使我按住Win键点击,它也返回false

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

MDN 说明:

  

MouseEvent.metaKey 只读属性返回一个 Boolean,表示在事件发生时是否按下了 Meta 键 (true) 或未按下 (false)。

     

注意:在 Mac 键盘上,这是命令键 ()。在 Windows 键盘上,这是 Windows 键 ()。

     

浏览器兼容性

     

enter image description here

MDN声称 FireFox 和 Chrome 支持 MouseEvent.metaKey,但它不起作用。

MouseEvent.metaKey 指的是哪个键?

为什么上述代码不起作用?

3个回答

11
如果你想知道在Windows系统中按哪个键可以使MouseEventmetaKey属性为true,答案是这取决于浏览器。而一些Windows浏览器根本不支持它,总是返回falseundefined
我找不到一个最新的支持metaKey的浏览器表格,尽管QuirksMode.org上有一个非常老的表格
如果你使用jQuery,metaKey它规范化用于跨浏览器兼容性的事件属性之一
如果你需要在网站上实现一些功能的键盘+鼠标事件,我建议使用Shift键,这样就可以在所有系统上运行。 (如果你需要更多的键选项,我建议你重新考虑你的设计。)

还是不好用。(顺便说一下,我已经更新了问题。) - Pacerier

4
经实证测试,以下是结果。需要注意的是,jQuery在规范化^F方面表现不佳。
在Mac上,使用Safari版本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 

在 Mac 上,使用 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

在Mac上,使用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

测试代码: // 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 " : ""));
  });

1
仍然似乎不起作用。你真的成功获取了值为“true”吗? - Pacerier
1
@Pacerier - 我的测试是使用keypress事件,而不是鼠标事件,我的错。 - Orwellophile
@Pacerier - 在 OS X 上使用 Chrome 进行一些测试,结果与我在 Safari 中指定的相同,当按下 ⌘ 键时,metaKey 被设置。 - Orwellophile

1

MouseEvent.metaKey指的是哪个键?

它指的是Windows键 Windows Key

为什么上面的代码不起作用?

因为至少在Firefox 48中存在一个错误,请参阅文档以获取更多信息。

解决方案:

使用shiftKey代替。它在事件对象上有一个同名属性。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接