JavaScript计算器按Enter键触发click事件问题求助

我正在开发一款JavaScript计算器，遇到一个问题：按下Enter键时，会触发最后一个绑定了addEventListener('click')的按钮事件，但我并没有为Enter键设置任何相关逻辑。我尝试过为Enter键单独编写处理函数，甚至把涉及Enter键的加法相关代码注释掉了，问题依然存在。

HTML代码 #

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../css/calculator.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Reddit+Mono:wght@200..900&display=swap"
      rel="stylesheet"
    />
    <title>Calculadora em JS</title>
  </head>
  <body>
    <section class="container">
        <div class="resultado">
            <p class="resultado_anterior"></p>
            <p class="resultado_calc"></p>
        </div>
        <a href="" class="porcentagem input_logico">%</a>
        <a href="" class="reset_teclado">CE</a>
        <a href="" class="reset_calc">C</a>
        <a href="" class="backspace">&#9003;</a>
        <a href="" class="um_dividido">1/x</a>
        <a href="" class="quadrado">Potência (2)</a>
        <a href="" class="raiz">Raiz (2)</a>
        <a href="" class="divisao input_logico">÷</a>
        <a href="" class="sete input">7</a>
        <a href="" class="oito input">8</a>
        <a href="" class="nove input">9</a>
        <a href="" class="multiplicacao input_logico">×</a>
        <a href="" class="quatro input">4</a>
        <a href="" class="cinco input">5</a>
        <a href="" class="seis input">6</a>
        <a href="" class="menos input_logico">-</a>
        <a href="" class="um input">1</a>
        <a href="" class="dois input">2</a>
        <a href="" class="tres input">3</a>
        <a href="" class="mais input_logico">+</a>
        <a href="" class="negativo_positivo">+/-</a>
        <a href="" class="zero input">0</a>
        <a href="" class="virgula input">,</a>
        <a href="" class="igual">=</a>
    </section>
    <script src="../js/calculator.js"></script>
  </body>
</html>

JavaScript代码 #

document.addEventListener("DOMContentLoaded", (event) => {
    inputs();
    reset()
    backspace()
    negativo_positivo()
})

const RESULTADO = document.querySelector(".resultado_calc")
const RESULTADO_ANTERIOR = document.querySelector(".resultado_anterior")
let aux = ""
let currentInput = ""
let prevInput = ""

// 数字键功能
function inputs() {
    document.querySelectorAll(".input").forEach(input => {
        window.addEventListener("keypress", tecla => {
            if (tecla.key === input.innerHTML) {
                currentInput = RESULTADO.textContent += `${tecla.key}`
                RESULTADO.textContent = currentInput
            }
        })
    })
    document.querySelectorAll(".input").forEach(input => {
        input.addEventListener("click", event => {
            event.preventDefault()
            currentInput += `${input.textContent}`
            RESULTADO.textContent = currentInput
            
        })
    })
}

// 删除键功能
function backspace() {
    document.querySelector(".backspace").addEventListener("click", event => {
        event.preventDefault()
        currentInput = RESULTADO.textContent.slice(0, -1)
        RESULTADO.textContent = currentInput
    })

    window.addEventListener("keydown", event => {
        if (event.key === "Backspace") {
            currentInput = RESULTADO.textContent.slice(0, -1)
            RESULTADO.textContent = currentInput
        }
    });
}

// 正负切换功能
function negativo_positivo() {
    document.querySelector(".negativo_positivo").addEventListener("click", event => {
        event.preventDefault()
        if (RESULTADO.textContent >= 0) {
            currentInput = -(currentInput)
            return (RESULTADO.textContent = currentInput)
        } else {
            currentInput = -(currentInput)
            return (RESULTADO.textContent = currentInput)
        }
    })
}

// // 加法功能（已注释）
// window.addEventListener("keydown", event => {
//     document.querySelectorAll(".input_logico").forEach(input_logico => {
//         if (input_logico.innerHTML === event.key) {
//             event.preventDefault()
//             aux = currentInput
//             prevInput = RESULTADO_ANTERIOR.textContent = aux + input_logico.innerHTML
//             RESULTADO_ANTERIOR.textContent = prevInput
//             currentInput = ""
//             RESULTADO.textContent = currentInput
//             console.log("currentInput Soma = " + currentInput)
//             console.log("prevInput Soma = " + prevInput)

//             window.addEventListener("keypress", event => {
//                 if (RESULTADO.textContent === "") {
//                     event.preventDefault()
//                     // RESULTADO.textContent = currentInput
//                 } else {
//                     if (event.key === "Enter") {
//                         event.preventDefault()

//                         prevInput = RESULTADO_ANTERIOR.textContent = aux + input_logico.innerHTML + currentInput
//                         console.log(prevInput)
//                         RESULTADO_ANTERIOR.textContent = prevInput
//                         currentInput = RESULTADO.textContent = parseFloat(aux) + parseFloat(currentInput)
//                         RESULTADO.textContent = currentInput
//                         console.log("currentInput Soma2 = " + currentInput)
//                         console.log("prevInput Soma2 = " + prevInput)
//                     }
//                 }
//             })
//         }
//     })
// })

// 重置功能
function reset() {
    document.querySelector(".reset_calc").addEventListener("click", event => {
        event.preventDefault()
        RESULTADO.textContent = ""
        RESULTADO_ANTERIOR.textContent = ""
        aux = ""
        currentInput = ""
        prevInput = ""
        console.log("reset")
    })
}

问题原因与解决方法 #

原因 #

浏览器默认会将Enter键触发的交互行为映射到页面最后一个可聚焦的交互式元素上，你的计算器里最后一个绑定click事件的是=按钮（.igual），因此按下Enter时会自动触发它的点击逻辑。另外，你使用<a>标签作为按钮，即使加了preventDefault()阻止跳转，依然无法完全规避浏览器的默认交互映射。

解决方法 #

1. 全局拦截Enter键默认行为
   在DOMContentLoaded回调中添加全局Enter键监听，直接阻止它的默认行为，避免触发意外点击：

document.addEventListener("DOMContentLoaded", (event) => {
    inputs();
    reset()
    backspace()
    negativo_positivo()
    
    // 新增：拦截Enter键默认行为
    window.addEventListener("keydown", (e) => {
        if (e.key === "Enter") {
            e.preventDefault();
            // 可选：如果需要Enter键等同于点击=按钮，解开下面的注释
            // document.querySelector(".igual").click();
        }
    });
})

2. 替换语义化标签（可选）
   将所有<a>标签替换为<button>标签，这更符合按钮的语义，也能减少浏览器默认行为带来的问题：

<button class="porcentagem input_logico">%</button>
<button class="reset_teclado">CE</button>
<button class="reset_calc">C</button>
<!-- 其他按钮同理替换 -->

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