如何检测按钮是否按预设正确顺序点击？绑定点击事件的异常代码如何修复

开发者阿泽

2026-10-1

问题分析与修复方案

现存问题

重复绑定点击事件：循环执行了5次$("button").on("click", ...)，导致每个按钮被绑定了5个点击监听器，点击一次会触发5次回调，出现多次弹窗的异常。
事件绑定写法有误（触发未点击就弹窗的核心原因）：如果出现无需点击就执行alert的情况，说明你绑定事件时直接执行了回调函数，比如写成了$("button").on("click", checkButton(j))，这种写法会立即执行checkButton，而非将其作为回调等待点击触发。
逻辑不符合顺序检测需求：原有代码没有记录当前已完成的步骤，无法实现「按顺序匹配按钮文本」的核心需求。

修复后代码

var points = [1,2,3,4,5];
// 记录当前待匹配的步骤下标，初始为0对应第一步
var currentStep = 0;

// 所有按钮仅绑定一次点击事件即可
$("button").on("click", function() {
  // 所有步骤完成后的边界处理，可按需修改
  if (currentStep >= points.length) {
    alert("所有步骤已完成");
    return;
  }
  const clickText = $(this).text();
  if (clickText == points[currentStep]) {
    alert("完成步骤 " + (currentStep + 1));
    // 匹配成功，进入下一个步骤
    currentStep++;
  } else {
    alert("步骤错误，当前应完成步骤 " + (currentStep + 1));
  }
});