如何让JavaScript中按键事件与点击监听事件功能一致

不需要单独为按键统计次数，直接复用现有的handleBalloonClick逻辑即可——它已经封装了计数、气球变大、爆炸和重置的完整流程。只需要添加一个键盘事件监听器，捕获回车键触发时调用该函数即可。

修改后的完整代码如下：

function getRandomClicksUntilExplosion() {
  return Math.floor(Math.random() * 7);
}

const containerElement = document.getElementById("container");
const balloonElement = document.getElementById("balloon");
const explosionElement = document.getElementById("explosion");

let clickCount;
let clicksUntilExplosion;

function resetState() {
    containerElement.className = 'unexploded';
    balloonElement.style.transform = "scale(1)";
    clickCount = 0;
    clicksUntilExplosion = getRandomClicksUntilExplosion();
}
function getBigger() {
    const currentScale = balloonElement.style.transform.match(/(\d+)/)[0];
    const newScale = currentScale.toString() * 2;
    balloonElement.style.transform = "scale(" + newScale + ")";
}
function explodeBalloon() {
    containerElement.className = 'exploded';
}

function handleBalloonClick() {
    clickCount = clickCount + 1;
    if (clickCount <= clicksUntilExplosion) {
        getBigger();
    }
    if (clickCount === clicksUntilExplosion){
        explodeBalloon();
    }
    if (clickCount === clicksUntilExplosion + 1){
        resetState();
    }
}

resetState();

document.addEventListener("click", handleBalloonClick);
// 监听回车键事件，复用点击逻辑
document.addEventListener("keydown", function(e) {
    if (e.key === 'Enter') {
        handleBalloonClick();
    }
});
//reset the balloon on double click
document.addEventListener("dblclick", resetState);

修改说明 #

• 添加了keydown事件监听器，当检测到按下的是回车键（e.key === 'Enter'）时，直接调用已有的handleBalloonClick函数。
• 回车键和点击操作会共享同一套计数和状态管理逻辑，既保留了原有点击功能，又实现了回车触发的需求，无需额外编写重复的计数逻辑。

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