JavaScript中输入值时如何覆盖按钮点击事件实现指定逻辑

问题根源 #

你当前的代码有两个关键问题：

• 按钮同时通过onclick属性绑定了clicked函数，又在输入时通过addEventListener添加了confirmation点击监听，输入值后点击按钮会同时触发这两个事件，所以才会依次弹出clicked without input→Have you input ?→clicked with input。
• myFunc会在每次输入内容时重复给按钮添加confirmation监听，多次输入后点击按钮还会触发多次确认框逻辑。

修正后的代码 #

直接在一个点击处理函数里统一判断输入状态，不需要混合两种事件绑定方式：

<input id="inputBox">
<button id="button">open another window</button>

const button = document.getElementById('button');
const inputBox = document.getElementById('inputBox');

button.addEventListener('click', () => {
  // 判断输入框是否有有效内容（去除首尾空格）
  if (inputBox.value.trim()) {
    const ret = confirm('Have you input ?');
    if (ret) {
      alert("clicked with input");
    }
  } else {
    alert("clicked without input");
  }
});

代码说明 #

• 移除了原有的oninput和onclick属性绑定，改用更规范的addEventListener统一处理点击逻辑。
• 点击按钮时直接检查输入框的值，通过trim()避免空空格被误判为有效输入。
• 逻辑完全匹配需求：输入有效内容时先弹出确认框，确认后显示对应提示；无输入时直接显示无输入提示。

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