检测按下的修改键而不触发键盘或鼠标事件

NVI*_*NVI 12 javascript dom keyboard-events

当一个人持有修改键(Shift,Alt,Ctrl)时,我的应用会更改其状态.我使用keydown/keyup事件跟踪修饰键:

var altPressed;
window.onkeydown = window.onkeyup = function(e) {
    altPressed = e.altKey;
}
Run Code Online (Sandbox Code Playgroud)

键盘事件不会在浏览器选项卡外触发.现在,想象一下以下场景:

  1. 按住Shift键
  2. 点击我的应用程序的链接,它将在新窗口中打开
  3. 释放Shift键

keyup 如果没有聚焦,事件将不会在我的页面上触发,因此当我再次专注于我的应用程序选项卡时,我的应用程序将显示它将显示仍然按下Shift键.

如果页面可见性事件具有修饰键属性,那将会很好.唉,他们没有.

document.addEventListener('webkitvisibilitychange', function(e) {
    if (document.webkitHidden) return;

    e.altKey // undefined :(

}, false);
Run Code Online (Sandbox Code Playgroud)

NVI*_*NVI 4

到目前为止我想到的最好的:

\n\n
document.body.onkeydown = function(e) {\n  if (e.which === 18) {\n    alt_state.textContent = \'pressed\';\n  }\n};\n\ndocument.body.onkeyup = function(e) {\n  if (e.which === 18) {\n    alt_state.textContent = \'released\';\n  }\n};\n\nfunction detectAlt() {\n  if (document.webkitHidden) return;\n  window.addEventListener(\'mousemove\', function onMove(e) {\n    alt_state.textContent = e.altKey ? \'pressed\' : \'released\';\n    window.removeEventListener(\'mousemove\', onMove, false);\n  }, false);\n}\n\ndocument.addEventListener(\'webkitvisibilitychange\', detectAlt, false);\nwindow.addEventListener(\'load\', detectAlt, false);\n
Run Code Online (Sandbox Code Playgroud)\n\n

按 alt 键并单击链接:jsbin

\n\n

它依赖于 mousemove 事件,load与 和visibilitychange事件不同,它具有altKey属性。缺点是,在有人移动鼠标之前,它不会检测到 altKey。

\n