首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >为什么在Mac浏览器上按下metaKey时,Javascript会丢弃keyUp事件?

为什么在Mac浏览器上按下metaKey时,Javascript会丢弃keyUp事件?
EN

Stack Overflow用户
提问于 2012-08-06 01:45:18
回答 3查看 2.3K关注 0票数 28

在Mac浏览器上,当metakey关闭时,javascript不会接收大多数键的keyup事件(其他修饰键似乎是个例外)。使用这个jsfiddle来演示(聚焦结果区域并尝试像cmd + x这样的东西,x将不会收到keyup事件):http://jsfiddle.net/mUEaV/

我已经在Chrome,FF,Safari和Opera的稳定版本中重现了这一点。在Windows7中,control键似乎不会发生同样的事情。

操作系统是否劫持了keyup事件?这似乎特别奇怪,因为使用元键的命令,如save、find、cut、copy等,都是在keydown而不是keyup上激活的,并且可以被javascript很好地劫持。

EN

回答 3

Stack Overflow用户

发布于 2012-08-06 05:06:02

当您按下这些键时,浏览器窗口是否保持焦点?在windows中,当按下windows+RCTRL+ESC以及类似的组合键时,你可以得到类似的结果,这会使浏览器失去焦点,从而导致错过事件。

票数 2
EN

Stack Overflow用户

发布于 2020-10-06 18:46:33

尽管event.metaKey返回false,但仍然填充了event.keyCode和event.key。

document.addEventListener('keyup', function(e) {
    console.log(e.metaKey || e.key);
});
Click here then press the Command, Control, or Option keys.

票数 1
EN

Stack Overflow用户

发布于 2020-05-30 15:15:57

您可以通过在最后一个keydown事件之后等待一段时间来创建一个人工keyup事件。唯一需要注意的是,人们在操作系统上会有不同的重复频率。https://jsfiddle.net/u7t43coz/10/

const metaKeyCodes = ["MetaLeft", "MetaRight"];
const shiftKeyCodes = ["ShiftLeft", "ShiftRight"];
const ctrlKeyCodes = ["ControlLeft", "ControlRight"];
const altKeyCodes = ["AltLeft", "AltRight"];
const modifierKeyCodes = [
  ...metaKeyCodes,
  ...shiftKeyCodes,
  ...ctrlKeyCodes,
  ...altKeyCodes
];

// record which keys are down
const downKeys = new Set()
const artificialKeyUpTimes = {}

function onKeydown(e) {
    downKeys.add(e.code);

    // do other keydown stuff here
    console.log("meta", e.metaKey, e.code, "down")

    // check if metaKey is down
    if (metaKeyCodes.some(k => downKeys.has(k))) {
      downKeys.forEach(dk => {
        // we want to exclude modifier keys has they dont repeat
        if (!modifierKeyCodes.includes(dk)) {
          // fire artificial keyup on timeout
          if (!artificialKeyUpTimes[dk])
            setTimeout(
              () => fireArtificialKeyUp(dk, e),
              500
            );
          artificialKeyUpTimes[dk] = Date.now();
        }
      });
    }
  }

 function fireArtificialKeyUp(code, e) {
    // if enough time has passed fire keyup
    if (Date.now() - artificialKeyUpTimes[code] > 100) {
      delete artificialKeyUpTimes[code];
      //if key is still down, fire keyup
      if (downKeys.has(code)) {
        const eCode = isNaN(code) ? { code: code } : { keyCode: code };
        document.dispatchEvent(
          new KeyboardEvent("keyup", { ...e, ...eCode })
        );
      }
    } else {
      setTimeout(() => fireArtificialKeyUp(code, e), 100);
    }
  }

  function onKeyup(e) {
    downKeys.delete(e.code);

    // do keyup stuff here
    console.log("meta", e.metaKey, e.code, "up")
  }

  document.addEventListener("keydown", onKeydown)
  document.addEventListener("keyup", onKeyup)
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11818637

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档