时间戳

首页 > 解决方案 > 如何防止 Enter 和 Space 键重复我在 Javascript 中的最后一次点击？

javascript - 如何防止 Enter 和 Space 键重复我在 Javascript 中的最后一次点击？

问题描述

我使用 Javascript 用 HTML 制作了一个计算器

单击按钮时效果很好（我使用了事件侦听器）。
但是我想让你在键盘上输入数字和操作，但遇到了一些麻烦：当我点击它时Space，它有点模仿我的最后一次点击，Enter它只是复制了相同的效果，但没有实际点击按钮。

我做了一个小例子，只有数字按钮和计算器操作数供你测试，这里是 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
</head>

<body>
    <div class="calculadora-grid">
        <div class="display">
            <div class="current-operand" data-current-operand></div>
        </div>

        <button data-number>1</button>
        <button data-number>2</button>
        <button data-number>3</button>
        <button data-number>4</button>
        <button data-number>5</button>
        <button data-number>6</button>
        <button data-number>7</button>
        <button data-number>8</button>
        <button data-number>9</button> 
        <button data-number>0</button>
        <button data-number>.</button>
</body>
<script src="script.js"></script>
</html>

和JS：

const numberButtons = document.querySelectorAll('[data-number]')
const currentOperandText = document.querySelector('[data-current-operand]')

numberButtons.forEach(button => {
    button.addEventListener('click', () => {
        currentOperandText.innerText = currentOperandText.innerText + button.innerText
    })
})

// the Space and Enter keys only replicate clicks, not other pressed keys.
const arrNumbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.']
window.addEventListener('keydown', (pressedKey) => {
    if(arrNumbers.includes(pressedKey.key)) {
        currentOperandText.innerText = currentOperandText.innerText + pressedKey.key
    }
})

如何防止Space和Enter复制点击？

标签： javascripthtmlcalculatorevent-listener

解决方案

推荐阅读