Javascript Mousedown事件处理程序干扰键处理程序

我的申请一直表现不好。在删除了越来越多的代码后，我设法找到了问题的核心，但这对我来说毫无意义

有点背景。我的web编辑器应用程序对按键笔划做出反应，例如，当按下Alt时，用于调整大小的处理程序被隐藏。它还对鼠标拖动、调整大小、删除、绘制选择框等操作做出反应。在尝试事件处理程序和防止默认行为（我不希望Alt将焦点更改为浏览器菜单，也不希望鼠标选择文本）时，我发现了一件奇怪的事情

当我为

keyup

和

keydown

（它们包含

preventDefault（）

）创建事件处理程序时，效果很好。但是，当我为

mousedown

添加处理程序时，它也可以工作，但是前面的处理程序停止工作。如果我从

mousedown

处理程序中删除

preventDefault（）

，所有操作都正常

以下是我的JS代码（或者更确切地说是为了验证问题不在其他地方而创建的）：

//它可以很好地处理这些事件
var事件=['keyup'，'keydown']；
//但是当添加mousedown时，它的preventDefault（）方法会以某种方式破坏keydown和keyup
//var事件=['keyup'，'keydown'，'mousedown']；
var log=document.getElementById（'log'）；
变量处理程序=函数（e）{
log.innerHTML=e.type+'
'+log.innerHTML；
e、 预防默认值（）；
}
对于（var i=0；i

见jsfiddle

为什么

mousedown

处理程序中的

preventDefault（）

方法会干扰键事件

在Chrome和Firefox中测试。

新：

我只是需要越来越深入地测试它。似乎

this.focus（）

与上次更新中的

documen.getElementById（）.focus（）和
window.focus（）一样有效。最佳实践（IMO）将使用
此
，因为它是对单击对象的通用引用

最新旧版本：

终于！我犯的错误是使用
文档
对象，而我应该使用
窗口
。这一次，在任何经过测试的浏览器（甚至IE11）的控制台中都没有错误。因此，代码应该如下所示：

var handler = function(e) {
    log.innerHTML = e.type + '<br>' + log.innerHTML;
    document.focus();
    e.preventDefault();
}

旧1:这是因为
mousedown
事件持续到您“放手”（尝试相同的代码，但使用
mouseup
而不是
mousedown
）。它不像
keydown
那样工作，事件发送到哪里，结束，然后重复此事件，直到您停止按键。
这不能解释
mousedown
阻止键处理程序工作的原因，也不能帮助我解决
mousedown
的问题。顺便说一句，我并没有抱怨
mousedown
只发送了一次，而
keydown
则被重复发送。经过更长时间的更详细测试：更新了答案，并提供了更好的解释。好的，起初我以为你做到了，但在看了更长时间后，你所做的只是添加了一个对undefined的调用（
document.focus===undefined
），它引发异常（检查控制台）并阻止调用
e.preventDefault（）
。这显然没有解决问题。我的向上投票太快了：）好吧。。。我的控制台是空的。完全是。在Chrome和Firefox上。我在这里找到了解决方案：。我确信关注元素是问题所在，因为使用该代码的简单页面（即使没有
document.focus（）
）也能完美工作。哦。。。我能够重现那个问题。我会设法妥善解决的。
var handler = function(e) {
    log.innerHTML = e.type + '<br>' + log.innerHTML;
    document.focus();
    e.preventDefault();
}

var handler = function(e) {
    log.innerHTML = e.type + '<br>' + log.innerHTML;
    document.focus();
    e.preventDefault();
}