点击后检测keyup答案

【问题标题】：Detect keyup after a click点击后检测keyup
【发布时间】：2022-01-22 01:33:28
【问题描述】：

我正在尝试在鼠标单击后检测修饰键 keyup 事件。

一些背景：检测到的鼠标点击被 Sketchfab 查看器 API 捕获，如文档 here 所述。 API 不会返回在单击时是否按下了任何修饰键。

但是，我希望 UI 根据是否按下修饰键来执行不同的操作。

我尝试检测并跟踪修饰键向下/向上事件，如下所示：

var c = {} // this is actually a vue.js object
c.keyModifiers = { ctrlKey: false, altKey: false, shiftKey: false }

window.addEventListener("keydown", function(event) {
        if ([16, 17, 18].includes(event.keyCode) ) {
            Object.keys(c.keyModifiers)
              .forEach(k => {
                   c.keyModifiers[k] = event[k]
            })
        }
}, true);
window.addEventListener("keyup", function(event) {
        if ([16, 17, 18].includes(event.keyCode) ) {
            Object.keys(c.keyModifiers)
                .forEach(k => {
                     c.keyModifiers[k] = event[k]
                 })
        }
}, true);

但点击后不再检测到 keyup 事件（keydown 效果很好）。

我尝试过/想到的其他事情：

检测窗口中任意位置的点击：似乎不起作用，可能是因为 Sketchfab 查看器是 iframe
有一个 setInterval 循环检查按键是否被按下：似乎没有办法做到这一点

在这种情况下如何检测是否按下了修饰键？

【问题讨论】：

为什么keyup很重要？你得到相同的代码。
因为我需要知道点击发生时是否按下了mod键，而我没有其他方法可以做到
实际上这些事件的结果略有不同，但它们都会检测到 mod 键，请参阅我的 answer。
您是否尝试过从传递给库的处理程序访问本机window.event？如果该库只是同步包装（鼠标）事件，它应该是可访问的（虽然 hack-ish）并方便地为您提供altKey/shiftKey/metaKey 属性。 developer.mozilla.org/en-US/docs/Web/API/Window/event
无论如何，症状“keydown 事件侦听器触发，但在我单击某些东西后 keyup 没有”听起来像单击静默聚焦不同的文档。毕竟没有更多个iframe在玩吗？

标签： javascript

【解决方案1】：

.keyCode 以及几乎所有其他内容都已弃用 .key。 .getModifierState() 方法将帮助确定 mod 键。

详情在下面的例子中

let keyDn = {};
let keyUp = {};

const viewKey = e => {
  const mods = ['Alt', 'Control', 'Shift'];
  let KEY = e.type === 'keydown' ? keyDn : keyUp;
  KEY.event = e.type;
  KEY.repeat = e.repeat;
  KEY.key = e.key;
  KEY.mod = mods.flatMap(mod => e.getModifierState(mod) ? [mod] : []);
  console.log(KEY);
};

document.addEventListener("keydown", viewKey);
document.addEventListener("keyup", viewKey);

:root {
  font: 1ch/1.5 'Segoe UI'
}

body {
  font-size: 2.75ch;
}

code {
  font-family: Consolas;
  color: #930;
}

kbd {
  font-family: Helvetica;
  padding: 1.5px 3px;
  border: 0.5px grey solid;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #000;
  background: #ccc;
}

ol,
ul {
  margin-left: -25px
}

<ol>
  <li>Click here with mouse, finger, or any other device or appendage ?</li>
  <li>Click any keys on keyboard
    <ul>
      <li>Including mod keys<br> ex. <code>"Shift"</code> is <kbd>Any Key</kbd> + <kbd>Shift</kbd>
      </li>
      <li>Also repeating keys<br> if <code>true</code> means user kept his/her/it's finger on the key
      </li>
    </ul>
  </li>
  <li>Review the console
    <ul>
      <li>There will be 2 objects: <code>keyDn</code> and <code>keyUp</code></li>
      <li>The <code>mod</code> property is an array value<br>ex. <code>['Shift', 'Control']</code> is <kbd>Shift</kbd> + <kbd>Ctrl</kbd>
      </li>
    </ul>
  </li>
  <li>Keep in mind these 2 objects will be overwriting their values with every keystroke</li>
</ol>

【讨论】：