window.location.hash返回旧哈希而非当前哈希的问题及解决

我用HTML/CSS/JavaScript实现了一个带映射的图片，点击area区域时调用appearModal函数弹出模态框，模态框内容依赖于area标签href属性对应的location.hash。但实际测试时发现location.hash总是返回上一次的哈希值——比如点击#hash2时返回#hash1，点击#hash3时返回#hash2，以此类推。

以下是我的代码摘要：

<img src="image.png" width="300" height="300" usemap='#modalmap'>
<map name="modalmap">
  <area shape="rect" coords="0,0,150,150" alt="topleft" href="#topleft" target="_self" title="topleft" onclick="appearModal(event)">
  <area shape="rect" coords="150,0,300,150" alt="topright" href="#topright" target="_self" title="topright" onclick="appearModal(event)">
  <area shape="rect" coords="0,150,150,300" alt="bottomleft" href="#bottomleft" target="_self" title="bottomleft" onclick="appearModal(event)">
  <area shape="rect" coords="150,150,300,300" alt="bottomright" href="#bottomright" target="_self" title="bottomright" onclick="appearModal(event)">
</map>
<script>
function appearModal(event){
  switch(location.hash){
    case "#topright":
      console.log(location.hash);
      break;
    case "#bottomright":
      console.log(location.hash);
      break;
    case "#bottomleft":
      console.log(location.hash);
      break;
    case "#topleft":
      console.log(location.hash);
      break;
    default:
      console.log(location.hash);
  }
}
</script>

请问这是什么原因？该如何修复？

这个问题的核心是事件执行顺序：当你点击<area>标签时，onclick事件会先触发，而浏览器根据href更新location.hash的操作是在onclick事件完成之后才执行的。所以在appearModal函数里读取location.hash时，拿到的还是点击之前的旧值，自然会出现“滞后一步”的情况。

修复方案有两种，你可以根据需求选择： #

方案1：直接从事件目标获取哈希值

既然我们需要的哈希值已经在<area>的href属性里，完全不用等location.hash更新，直接从触发事件的元素上读取即可：

function appearModal(event){
  // 直接获取当前点击元素的hash部分
  const hash = event.target.hash;
  
  switch(hash){
    case "#topright":
      console.log(hash);
      // 这里写对应模态框的逻辑
      break;
    case "#bottomright":
      console.log(hash);
      break;
    case "#bottomleft":
      console.log(hash);
      break;
    case "#topleft":
      console.log(hash);
      break;
    default:
      console.log(hash);
  }
}

这种方式最简单，不需要修改浏览器的默认行为，直接拿到当前点击的哈希值。

方案2：阻止默认跳转，手动更新hash

如果你确实需要同步更新location.hash（比如要让地址栏和模态框状态同步），可以先阻止<area>的默认跳转行为，然后手动设置location.hash，这样就能保证函数里读取到的是最新值：

function appearModal(event){
  // 阻止浏览器默认的href跳转行为
  event.preventDefault();
  
  // 获取当前area的哈希值并手动设置
  const hash = event.target.hash;
  location.hash = hash;
  
  switch(hash){
    case "#topright":
      console.log(location.hash);
      break;
    case "#bottomright":
      console.log(location.hash);
      break;
    case "#bottomleft":
      console.log(location.hash);
      break;
    case "#topleft":
      console.log(location.hash);
      break;
    default:
      console.log(location.hash);
  }
}

这个方案会同步更新地址栏的哈希值，同时保证函数里拿到的是最新值，适合需要地址栏哈希和模态框状态同步的场景。

额外提示 #

如果你的模态框逻辑需要支持浏览器前进后退按钮切换，可以额外添加hashchange事件监听：

window.addEventListener('hashchange', function() {
  // 这里处理哈希变化后的模态框逻辑
  console.log('哈希更新为:', location.hash);
});

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