JavaScript Prompt条件跳转失效：密码验证错误仍跳转至受保护页面

需求是给作品集页面设置简易密码保护（明确知晓未加密且可接受），当前代码存在问题：点击链接后，输入正确密码能正常跳转至目标页面，但输入错误密码或取消弹窗时，仍会跳转到受保护页面，需要修改代码让此时页面停留在index.html。

修改后的代码如下： #

JavaScript代码

function passWord() {
  var s = prompt("请输入密码");
  // 处理密码错误或取消弹窗的情况
  if (s !== "pinkdrink") {
    // 仅在主动输入错误密码时提示，取消弹窗不提示
    if (s !== null) {
      alert("密码错误。");
    }
    // 返回false阻止默认跳转，停留在当前页面
    return false;
  }
  // 密码正确，执行跳转
  window.location.href = "projectDir/spring2022.html";
  return false;
}

HTML代码

<div class="portfolio-item">
  <a href="projectDir/spring2022.html" onClick="return passWord()">
    <span class="thumb-info thumb-info-centered-info thumb-info-no-borders border-radius-0">
      <span class="thumb-info-wrapper border-radius-0">
        <img src="img/projects/spring2022/spring2022-thumb.jpg" class="img-fluid border-radius-0" alt="" />
        <span class="thumb-info-title">
          <span class="thumb-info-inner">客户</span>
          <span class="thumb-info-type">角色</span>
        </span>
      </span>
    </span>
  </a>
</div>

修改说明： #

• HTML部分：将onClick="passWord()"改为onClick="return passWord()"，通过返回函数结果阻止a标签的默认跳转行为，避免不管密码验证结果如何都直接跳转到目标页面。
• JavaScript部分：
  • 简化逻辑，去掉不必要的while循环；
  • 处理弹窗取消的场景（此时prompt返回null），避免误提示错误；
  • 仅在密码正确时主动执行跳转，错误或取消时返回false，维持当前页面（index.html）不变。

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