HTML5 Canvas键事件阻止鼠标事件

Question

我有这个小代码。它是绘图应用程序的开始：https://jsfiddle.net/t2xycjcd/1/（基于www.williammalone.com的代码构建）

这是关键的倾听者：

canvas.onkeypress = function (e) {
    e.preventDefault();
    var letter = String.fromCharCode(e.keyCode); 
    if (keyMap[letter]) {
        settings[keyMap[letter].param] = keyMap[letter].value;
        refreshToolStatusDisplay();
        redraw();
    }
}

这是鼠标监听器（没什么特别的）：

canvas.onmousedown = function(e)
    {
        console.log("mousedown");
        clickX = offsetX(e, canvas);
...

在关键事件发生后的短时间内（或立即发生），鼠标事件未正确触发，我感到很疯狂。

如何重现：

1. 使用线条工具绘制线条
2. 按＆＃34; p＆＃34;选择＆＃34;播放器＆＃34;的关键工具
3. 现在没有暂停，也没有移动鼠标 - ＆gt;点击

mousedown事件不会触发。

但是如果你要么在第三步之前等一秒钟，要么再移动鼠标或再点击一次。

这对我的目的来说是灾难性的。

我尝试过各种各样的东西但没有效果：

1. 在关键事件后将焦点重置为canvas元素 - ＆gt;不是问题，画布仍然有焦点
2. 通过MouseEvent.initMouseEvent（）触发键事件后的自定义鼠标事件 - ＆gt;
3. 其他不值得一提的疯狂的东西

这似乎是canvas元素的典型行为。这是一个     类似但不相关的can​​vas元素与鼠标监听器的小提琴：http://jsfiddle.net/4Lanc/ - ＆gt;同样的行为：按键后不久点击将阻止点击发生。

有人有想法吗？