如何在图像交互的JavaScript函数中使用超链接实现成功开门跳转

之前尝试静态超链接实现跳转失败，本质是把分支跳转逻辑绑定在了静态HTML属性上，完全绕过了JS的钥匙持有状态判断——只要给<area>标签加href属性，不管用户有没有拿到钥匙，点击门的区域都会直接触发默认跳转，根本走不到hasKey的判断分支，自然达不到预期效果。

具体实现步骤 #

• 移除<area>标签上所有和静态跳转相关的属性（比如乱加的href、target），保留原有的点击触发、焦点锁定逻辑即可
• 在tryDoor()函数的开门成功分支内，使用原生JS的页面跳转API实现定向跳转，不要靠HTML超链接承载分支判断逻辑

修正后的完整代码 #

原有HTML结构无需大改，只要不要额外给<area>加静态超链接：

<img id="corridor" src="Images/Corridor.jpg" class="centre" usemap="#map1">
<img id="key" src="Images/key.png" onclick="pickupKey()">
<map name="map1">
    <area onclick="tryDoor()" id="door1" onblur="door1.focus()" autofocus shape="rect" coords="830,240,750,350"/>
</map>

修正后的JS逻辑，把跳转逻辑嵌在开门成功的判断分支内：

// 全局钥匙状态，和你原有逻辑的变量保持一致
let hasKey = false;
function tryDoor(){
    if (hasKey === true) {
        alert("you open the door");
        // 替换为你自己的目标页面相对路径即可
        window.location.href = "your_target_page.html";
    }else{
        alert("The door is locked find a key");
    }
}

常见踩坑提醒 #

• 不要把跳转代码写在if判断的大括号外部，否则无论用户有没有持有钥匙，点击门都会触发跳转
• 检查原有函数的大括号是否完整闭合，语法错误会导致JS逻辑直接失效，连带跳转代码不执行（你现有贴出的代码里tryDoor函数缺少外层闭合大括号，补全后逻辑才能正常运行）
• 若跳转代码写了但不生效，先排查hasKey的判断逻辑：比如是否混用了全局变量和局部变量、hasKey的实际值是否匹配判断条件（比如值是字符串类型的"false"，会被判定为布尔真值，导致分支判断失效）
• 若想避免alert弹窗消失后立刻跳转的突兀感，可以加1-2秒的延时再触发跳转：

  alert("you open the door");
  setTimeout(()=>{
      window.location.href = "your_target_page.html";
  }, 1500);
  

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