键盘和鼠标事件的常见问题

鼠标mouseup事件

示例代码：【可能会导致onmouseup事件不触发】

el.onmousedown = function(e){
    handler1(e.target)
}
el.onmouseup = function(e){
    handler2(e.target)
}

解决方案：【在window上注册onmouseup事件】

el.onmousedown = function(e){
    handler1(e.target)
    window.onmouseup = function(){
        handler2(e.target)
        window.onmouseup = null
    }
}

键盘keydown事件

示例代码：【可能会导致keydown事件频繁触发】

window.onkeydown = function(e){
    console.log(e.key)
}
window.onkeyup = function(e){
    console.log(e.key)
}

解决方案：【使用一个变量保存当前按下的键】

const _keys = new Set()
window.onkeydown = function(e){
    if(!_keys.has(e.key)){
        console.log(e.key)
    }
}
window.onkeyup = function(e){
    console.log(e.key)
    _keys.delete(e.key)
}