移除 JavaScript 默认按键事件答案

【问题标题】：Remove JavaScript Default Keypress Events移除 JavaScript 默认按键事件
【发布时间】：2021-05-25 02:30:13
【问题描述】：

HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
    </head>
    <body>
        <div class="testdiv">
            <button type="button"></button>
        </div>
    <body>
<html>

CSS：

button {
    background-color: skyblue;
    height: 75px;
    width: 150px;
    border-radius: 5px;
}

JavaScript：

const testdiv = document.querySelector('.testdiv');
document.addEventListener('click', (event) => {
    console.log('I was clicked');
});

打开您的控制台，现在单击蓝色按钮。然后按 Enter 键。注意按键是如何导致按钮点击的。现在，再次单击它，但这次单击空白区域，然后按 Enter。请注意，控制台中没有记录任何内容。

为什么用鼠标选中元素后回车键会导致点击，如何禁用此功能？

如果我想将 Enter 键的 keydown 或 keyup 事件映射到不同的元素，而不会将控制台登录到此程序中，我会遇到严重的问题。

我不确定这种行为的原因。我注意到 Tab 也表现出一种奇怪的行为，如果存在多个元素并且鼠标选择了一个元素，您可以按 Tab 并且它将选择下一个元素。这并不困扰我，但这是我希望能够禁用的这些预绑定键行为的另一个示例。

【问题讨论】：

您是否尝试过使用 keydown 事件而不是 key up？此外，如果这不是您想要的，您可能只需要为按钮 keydown 事件设置动作侦听器并调用event.preventDefault()。包含您的代码或一些等效但简化的示例可能仍然有益，因此我们可以看到您正在尝试做什么。
显示代码，通过清晰的问题描述和重现问题的最短代码集获得修复代码的帮助。
我为我的表述不够清楚而道歉。我已经编辑了这个问题。希望现在这更有意义:)

标签： javascript html element keypress disable

【解决方案1】：

尝试在divs 上设置属性tabindex=-1，应该会有所帮助。

【讨论】：

我尝试将它添加到我在编辑中发布的代码中的 div 中，但问题仍然存在。