area标签不负责数据加载，仅定义图片可点击区域；需用JavaScript绑定click事件并调用fetch实现局部加载，同时兼顾可访问性与响应式适配。

area 标签本身不负责数据加载，它只定义图片上的可点击区域；真正触发局部加载的是点击事件 + JavaScript 请求逻辑。直接指望 area 自动拉数据或刷新 DOM，会发现什么也没发生。

为什么不能靠 area 的 href 实现局部加载

很多人试过给 area 写 href="javascript:loadData('shanghai')" 或 href="#shanghai"，结果点击后页面跳转、空白、或根本没反应——这是因为：

• href 值若为 javascript: 伪协议，需确保函数在全局作用域（如挂到 window 上），否则执行报 ReferenceError
• href="#id" 是锚点跳转，不发请求，也不会更新任何内容
• 浏览器对 area 的 href 处理非常严格：空值、#、相对路径但目标不存在，都会静默失败，控制台也不报错
• area 没有原生的 fetch 或 load 能力，必须手动绑定事件

正确做法：用 addEventListener 捕获 area 点击并触发局部加载

核心是把 area 当成普通可点击元素，用 JS 拦截默认行为，再调用 fetch 更新指定容器。关键点：

• 必须给 area 加 role="button" 和 tabindex="0"，否则键盘用户无法聚焦
• 用 event.preventDefault() 阻止默认跳转（哪怕 href 是 javascript:void(0)）
• 推荐用 data-* 属性传参，比如 data-province="zhejiang"，比解析 href 更可靠
• 加载目标容器（如 <div id="detail-panel">）要提前存在，且避免用 <code>innerHTML 直接赋值（会销毁事件）

  示例代码片段：

  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载

  立即学习“前端免费学习笔记（深入）”；

  <img src="china-map.png" usemap="#province-map" alt="中国地图">
  <map name="province-map">
    <area shape="poly" coords="..." alt="浙江省" data-province="zhejiang">
    <area shape="poly" coords="..." alt="广东省" data-province="guangdong">
  </map>
  <div id="detail-panel"></div>
  <p><script>
  document.querySelectorAll('area[data-province]').forEach(area => {
  area.addEventListener('click', async (e) => {
  e.preventDefault();
  const container = document.getElementById('detail-panel');
  const province = area.dataset.province;</p><pre class="brush:php;toolbar:false;">// 防重复点击
  if (container.hasAttribute('aria-busy')) return;
  container.setAttribute('aria-busy', 'true');
  container.textContent = '加载中…';
  
  try {
    const res = await fetch(`/api/province/${province}`);
    const html = await res.text();
    container.replaceChildren(...new DOMParser().parseFromString(html, 'text/html').body.childNodes);
  } catch {
    container.textContent = '加载失败，请重试';
  } finally {
    container.removeAttribute('aria-busy');
  }

  }); });

  容易被忽略的兼容性与可访问性细节

  地图热区在移动端、读屏软件、旧浏览器上极易失效，不是加了 area 就算完事：

  • map 和 img 必须在同一 DOM 树层级，不能被 <picture></picture>、<figure></figure> 或 Shadow DOM 隔开，否则 usemap 失效
  • 移动端 Safari 对小面积 poly 区域响应迟钝，建议每个热区最小尺寸 ≥ 44×44px，或加 touch-action: manipulation
  • area 的 alt 是强制属性，但仅靠它不够；应配合 aria-label 提供更明确的操作说明，例如 aria-label="点击查看浙江省详情"
  • 如果图片缩放（如响应式 max-width: 100%），coords 不会自适应——要么用 JS 动态换算坐标，要么改用 SVG 方案

  真正难的不是写几行 area，而是让每个省份点击后稳定加载、键盘可用、屏幕阅读器能理解、缩放后依然精准——这些细节堆起来，才是实际项目里卡住人的地方。