Question

我有一个带有HTMLGL画布和javascript的简单html页面。在脚本中，我听画布的“ 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（）中出现一个keypress事件preventDefault被调用，因为还会触发key up事件。

Answer 1

stopPropagation阻止事件冒充事件链。

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

因此，如果要触发所有三种方法，请从所有三个事件中删除stopPropagation()。希望它能工作。

Answer 2

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

Answer 3

我注意到了类似的问题。

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

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

事实证明，空格键执行的滚动操作是由keypressed事件触发的。

为解决该问题，我仅在preventDefault事件中调用了keypressed。我未更改keyup和keydown事件。

只是想分享一下，以防万一我的情况偶然发现了此页面。

按键事件中的preventDefault（）是否会阻止随后的按键事件？

3 个答案: