JavaScript按钮点击导航异常：首次点击无效二次才生效问题排查

核心问题：事件绑定时机错误 #

你写的handlePurchaseBtn函数的作用是给按钮添加点击事件监听器，但如果这个函数是在第一次点击按钮时才被触发执行（比如按钮的onclick属性直接绑定了这个函数），就会出现首次点击无效的情况：

• 第一次点击按钮：执行handlePurchaseBtn，完成事件监听器的绑定，但这次点击本身不会触发刚绑定的监听器，所以没有跳转动作。
• 第二次点击按钮：此时监听器已经存在，点击会触发监听器里的跳转代码，页面才会跳转。

解决办法 #

方法1：页面加载时自动完成事件绑定

把绑定逻辑放在页面加载完成的回调里，这样页面加载好后按钮就已经带上了点击事件，第一次点击就能触发跳转：

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('go-home-btn').addEventListener('click', function() {
    window.location = 'https://www.google.com';
  });
});

方法2：简化逻辑，直接绑定跳转函数

如果你的需求是点击按钮就跳转，没必要嵌套绑定逻辑，直接把跳转代码作为点击事件的处理函数：

function handlePurchaseBtn() {
  window.location = 'https://www.google.com';
}

// 页面加载后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('go-home-btn').addEventListener('click', handlePurchaseBtn);
});

或者直接在按钮的HTML里绑定（不推荐，但适配现有逻辑调整）：

<button id="go-home-btn" onclick="handlePurchaseBtn()">返回首页</button>

内容的提问来源于stack exchange，提问作者Mostafa Ferdaous Nayeem