keydown 事件中的 preventDefault() 是否会阻止以下按键事件？答案

【问题标题】：Does preventDefault() in keydown event prevent a following keypress event?keydown 事件中的 preventDefault() 是否会阻止以下按键事件？
【发布时间】：2019-08-07 18:56:17
【问题描述】：

我有一个简单的 html 页面，附有 webgl 画布和 javascript。在脚本中，我监听画布的“keydown”、“keypress”和“keyup”事件。在事件处理程序中，我登录以在触发事件时进行调试。如果我在“keydown”处理程序中的事件对象上调用 preventDefault()，我将不再收到“keypress”事件，并且想知道这是否是预期的行为？因此，如果我按下例如“a”之类的字符键，则会触发 keydown 和 keyup 事件，但只有在 keydown 事件处理程序中未调用 preventDefault() 时才会调用 keypress。

到目前为止，我在 windows、firefox 和 chrome 上对此进行了测试。

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Main</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <style>
        body,html { margin:0; padding:0; background-color:black; width:100%; height:100%; }
        canvas#webgl { width:100%; height:100%; }
    </style>
</head>
<body>
    <canvas id="webgl" tabindex="0"></canvas>
    <script type="text/javascript" src="test_canvaskeypress.js"></script>
</body>
</html>

test_canvaskeypress.js：


var canvas = document.getElementById("webgl"); 
canvas.addEventListener('keydown',this.onKeyDown,false);
canvas.addEventListener('keyup',this.onKeyUp,false);
canvas.addEventListener('keypress',this.onKeyPress,false);


function onKeyDown(e) {
    console.log('keyup: '+e.keyCode); 
    e.preventDefault();//prevents the keypress event, is this intended behavior?
    e.stopPropagation();

}
function onKeyUp(e) {
    console.log('keydown: '+e.keyCode); 
    e.preventDefault();
    e.stopPropagation();
}
function onKeyPress(e) {
    console.log('keypress: '+e.key); 
    e.preventDefault();
    e.stopPropagation();
}

我不知道会发生什么，因为 preventDefault 的文档信息量不是很大，但我认为应该出现一个按键事件，尽管在 onKeyDown() 中调用了 preventDefault，因为按键事件也被触发了。

【问题讨论】：

标签： javascript html

【解决方案1】：

从最新的 W3C 工作草案 (https://www.w3.org/TR/uievents/#keydown) 我们可以看到 keydown 默认操作之一是 keypress 事件（以及其他）！因此，当您对 keydown 事件执行 preventDefault 时，实际上是在阻止事件默认操作，在这种情况下，这些操作之一就是 keypress 事件。

【讨论】：

就是这样。非常感谢。

【解决方案2】：

stopPropagation 阻止事件在事件链上冒泡。

preventDefault 阻止浏览器对该事件执行默认操作

因此，如果您希望所有三个方法都被触发，请从所有三个事件中删除 stopPropagation()。希望它会起作用。

【讨论】：

快速测试它并不起作用，PreventDefault 仍然阻止按键事件。顺便说一句，我不希望我的事件冒泡 dom 树。而且我认为这里不需要向上传播事件，因为我所有的事件处理程序都绑定到画布并且没有父元素。

【解决方案3】：

我注意到一个类似的问题。

我试图阻止 空格键 导致页面滚动。

我在所有关键事件中添加了preventDefault，以防止页面滚动。它起作用了，但它也阻止了keypressed 事件的触发。我在其他地方需要这个活动，所以我必须找到解决办法。

原来空格键执行的滚动动作是由keypressed事件触发的。

为了解决问题，我只在keypressed 事件上调用了preventDefault。我没有修改keyup 和keydown 事件。

只是想分享一下，以防遇到我这种情况的人偶然发现此页面。

【讨论】：