javascript - Mousedown 事件处理程序会干扰按键处理程序

Question

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

一点背景。我的网络编辑器应用程序对击键使用react，例如当按下 Alt 时，调整大小的处理程序将被隐藏。它还对拖动、调整大小、删除、绘制选择框等鼠标操作使用react。在尝试事件处理程序并防止默认行为时(我不希望 Alt 将焦点更改为浏览器菜单，鼠标都无法选择文本)，我发现了一个奇怪的事情。

当我为 keyup 和 keydown 创建事件处理程序(其中包含 preventDefault())时，它工作正常。但是，当我为 mousedown 添加处理程序时，它也可以工作，但以前的处理程序停止工作。如果我从 mousedown 处理程序中删除 preventDefault()，则一切正常。

这是我的 JS 代码，被精简到最少(或者更确切地说，为了验证问题不在其他地方而创建):

// it works fine with these events
var events = ['keyup', 'keydown'];

// but when mousedown is added, its preventDefault() method somehow breaks keydown and keyup
//var events = ['keyup', 'keydown', 'mousedown'];

var log = document.getElementById('log');

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

for (var i = 0; i < events.length; i++) {
  window.addEventListener(events[i], handler);
}

参见 jsfiddle here .

为什么 mousedown 处理程序中的 preventDefault() 方法会干扰按键事件？

在 Chrome 和 Firefox 中测试。

Answer 1

新:

我只需要进一步测试它。看来 this.focus() 与我的 documen.getElementById().focus() 和 window.focus() 一样有效最后更新。最佳实践 (IMO) 将使用 this，因为它是对单击对象的通用引用。

最新旧版: New Demo

终于!我做错的是使用document对象，而我应该使用window。这次在任何测试的浏览器(甚至 IE11)中控制台都没有错误。所以代码应该如下所示:

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

旧2:这次我只是进一步测试了这一点。似乎 mousedown 上的 e.preventDefault() 不会破坏其他事件，并且按其应有的方式工作:防止默认操作(以及其他操作)设置 focus 到 DOM 元素上。我在本地 html 文件上尝试了相同的代码，它工作得很好。您需要做的就是自行将焦点设置在必须读取这些事件的对象上。

编辑: DEMO和handler函数的代码:

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

旧 1: 这是因为 mousedown 事件会一直持续到您“放手”为止(尝试相同的代码，但使用 mouseup 而不是 鼠标按下)。它只是不像 keydown 那样工作，其中事件被发送、结束，然后重复此事件，直到您停止按键。