Javascript：keydown事件不触发

Question

我正在编写一个用户脚本，代码如下：

(function() {
    'use strict';
    window.addEventListener("keydown", arrows, false);
    function arrows(e) {
        debugger;
        switch(e.keycode) {
             case 37: alert("Left"); break;
             case 39: alert("Right"); break;
        }
    }
})();

最终，左右两个情况将分别导航到系列中的上一篇和下一篇文章，类似于以下内容：

window.location = String(parseInt(window.location.href.match(/\d+$/))-1);

然而，按箭头键并不会触发警报。脚本明显已经加载，Chrome开发者菜单显示arrows()函数已注册为window.keydown的事件监听器，但是该函数从未触发。我在arrows()函数中添加了debugger;，但当我按下箭头键时调试器没有显示。

- Griffin Young

---

树中是否有一个事件处理程序阻止 keydown 事件的传播（在这种情况下，您应该将 addEventListener 的第三个参数设置为 true 以启用捕获）？ - Stuart P. Bentley

Answer 1

可能是因为处理元素的处理程序在冒泡到 window 之前就停止了事件传播（可能是由于糟糕编写的 onkeydown 返回 false 以防止默认操作，而不在意这也会停止事件传播），因此 事件传播 可能被阻止了。

您应该使用捕获来附加侦听器，以便它将在 window 上捕获事件，在它冒泡之前：

// note the third parameter
window.addEventListener("keydown", arrows, true);

- Stuart P. Bentley

---

关键似乎是将监听器添加到window而不是body或div元素。 - undefined

Answer 2

您拼写了错误的keyCode：

switch(e.keyCode) { // Code is uppercase
    case 37: alert("Left"); break;
    case 39: alert("Right"); break;
}

- Azamantes

---

这并不会阻止debugger语句的触发。 - Stuart P. Bentley

@StuartP.Bentley 嗯？ - Roko C. Buljan

@RokoC.Buljan请参见OP代码的第5行。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger - Stuart P. Bentley

Answer 3

你的事件可能已经按预期被捕获。使用 console.log 来验证事件是否被捕获，而不是使用 alert。我不知道为什么使用 alert 无法正常工作：我怀疑它与事件触发的时间和警告对话框阻止正常工作流有关。

- user435421