如何阻止点击按钮后按回车键再次触发按钮点击事件

问题出在按钮被点击后会自动获得焦点，此时按下回车键，浏览器会默认触发按钮的click事件，导致重复执行逻辑。你可以通过拦截按钮的回车键事件来解决这个问题：

方案：给按钮添加回车键拦截逻辑 #

直接给目标按钮绑定keydown事件，当检测到回车键时，阻止浏览器的默认行为即可：

<body>
    <button id="aButton">A button</button>

    <script>
        const btn = document.querySelector("#aButton");
        
        btn.addEventListener("click", () => {
            console.log("Button clicked!");
        });
        
        // 拦截回车键的默认行为
        btn.addEventListener("keydown", (e) => {
            if (e.key === 'Enter') {
                e.preventDefault();
            }
        });
    </script>
</body>

补充说明 #

• 使用e.key === 'Enter'比旧的keyCode === 13兼容性更好，更符合现代标准。
• 这种方法只会影响目标按钮，不会干扰页面上其他元素的回车键功能，完全满足你“回车键用于其他用途”的需求。

内容的提问来源于stack exchange，提问作者Mario