如何基于文本输入框的值阻止按钮点击事件执行（无alert实现）？

原来靠alert()实现阻止按钮点击是因为alert会阻塞JS执行线程，打断了后续按钮click事件的处理流程，但这是依赖浏览器的临时行为，不具备通用性。要去掉alert也能稳定实现需求，咱们可以用一个状态变量来控制按钮的点击逻辑，具体代码修改如下：

修改后的JS代码 #

$(document).ready(function() {
  // 声明状态变量，标记是否需要阻止按钮点击
  let shouldBlockBtn = false;

  $('#txt').on('change', (ev) => {
    const inputVal = $(ev.target).val();
    if (inputVal === "stop") {
      console.warn("Wrong condition, I want to avoid the click event on button");
      shouldBlockBtn = true; // 设置阻止状态
    } else {
      console.log("Condition OK!");
      shouldBlockBtn = false; // 解除阻止状态
    }
  });

  $('#btn').on('click', (e) => {
    if (shouldBlockBtn) {
      console.log("Button click blocked!");
      shouldBlockBtn = false; // 可选：重置状态，避免一直阻止后续点击
      return; // 终止事件处理
    }
    console.log("Button pressed");
  });
});

HTML代码（无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <input id="txt"/>
  <button id="btn">Click me</button>
</div>

逻辑说明 #

1. 输入框失去焦点触发change事件时，根据输入值更新shouldBlockBtn的状态
2. 点击按钮时，先检查状态变量：如果是true就直接终止click事件的执行，不会打印"Button pressed"
3. 可选：在阻止按钮点击后重置状态，这样用户后续修改输入值后，按钮能恢复正常点击

内容的提问来源于stack exchange，提问作者M. Prati