keyup事件问题

Question

问题

我自己写了一个可以自定义监听快捷键组合的模块，
在写按键弹起的函数时候，发现了一个奇怪的现象。

如果我先按下⌘（不松开）再按D，
此时松开D 不会触发 keyup

如果我先按下D（不松开）再按⌘，
此时松开⌘则会触发 keyup

代码

const Immutable = require('immutable');
let listenList = Immutable.Map({});
let keyDownGroup = [];

const getKeyGroupString = keyGroupArray => {
    let keyGroup = Array.from(keyGroupArray);
    keyGroup.sort();
    return keyGroup.join(',');
}

/**
 * 添加快捷键监听
 * kg      Array    快捷键组合
 * handler Function 被监听的事件
 **/
const addListener = (kg, handler) => {
    let keyGroup = getKeyGroupString(kg);

    listenList = listenList.update(
        keyGroup,
        handlerList => handlerList ? handlerList.push(handler) : Immutable.List([handler])
    );
};

/**
 * 移除快捷键监听
 * kg            Array    快捷键组合
 * deleteHandler Function 要被移除监听的事件（如果为空则移除该快捷键组合的所有事件）
 **/
const removeListener = (kg, deleteHandler) => {
    let keyGroup = getKeyGroupString(kg);

    if (listenList.hash(keyGroup)) {
        if (deleteHandler) {
            listenList = listenList.update(
                keyGroup,
                handlerList => handlerList.filter(handler => handler !== deleteHandler)
            );
        } else {
            listenList = listenList.delete(keyGroup);
        }
    }
}

window.addEventListener('keydown', event => {
    keyDownGroup = Array.from(new Set([...keyDownGroup, event.keyCode]))
    let keyDownGroupString = getKeyGroupString(keyDownGroup);
    if (listenList.has(keyDownGroupString)) {
        listenList.get(keyDownGroupString).forEach(
            handler => handler()
        );
    }
});

window.addEventListener('keyup', event => {
    // 出现奇怪问题的地方……
    console.log('keyup...');
    // keyDownGroup = [];
    keyDownGroup.pop();
});

module.exports = {
    addListener,
    removeListener
}

userAgent

"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.110 Electron/0.36.7 Safari/537.36"

Answer 1

题主是要实现组合键的效果对吧。

JavaScript 提供了keydown和keyup这两个键盘事件给我们已经足够了。但是有个问题就是如果同时按两个键的话就会出现执行两次或多次的keydown和keyup事件，这样的话就不知道用户是否按了组合键了。

这样的话，只需要弄一个key的变量用来存放用户点击键的keyCode。然后再keydown和keyup事件里面判断是否我们需要的哪一些键的keyCode就行了。

代码如下：

var doc = document;
var key = [];

doc.onkeydown = doc.onkeyup = function(e){
    var e = e || event;
    key[e.keyCode] = e.type == 'keydown';
  
    if (key[16] && key[68]) {
      console.log('你按下了 shift + d');
    }
};

Demo

---

相关：

javascript multiple keys pressed at once

---

欢迎题主加入我们二次元前端群和我们一起玩耍，群号：291646098 （因为我们群主对你很感兴趣但是没有找到你qq号）

Answer 2

⌘ + D 不是直接出戏了么。。 这是浏览器添加书签的热键
组合键按下的时候被浏览器程序本身捕获，页面就捕获不到了