data-属性仅用于存储自定义数据，不能直接创建可点击区域，必须配合JavaScript才能触发行为；它不可替代<area>的语义化功能，也不具备原生交互能力。
data- 属性本身不能让图片区域可点击，也不能替代 <area> 或事件绑定逻辑。它只是存储自定义数据的容器，必须配合 JavaScript 才能触发行为。
为什么data-属性不能直接创建可点击区域
HTML 中没有“data-clickable”或“data-href”这类原生可执行属性。浏览器会忽略所有以 data- 开头的属性，既不渲染，也不自动绑定事件或跳转。你看到的“点击跳转”，实际是 JS 读取了 data-url 后手动调用 window.location.href 或 fetch() 实现的。
常见错误现象：
- 写了
<img src="map.png" data-region="sun" data-url="sun.htm">，但点击毫无反应 - 用 CSS 给
data-元素加cursor: pointer，鼠标变手形了，仍无法触发任何动作 - 误以为
data-能像href一样被搜索引擎或屏幕阅读器识别为导航意图
如何正确结合data-与<area>使用
在图像映射中，<area> 是唯一语义化、无障碍、原生支持键盘导航（Tab + Enter）的可点击区域载体。data- 只应在它身上补充非标准元信息，比如埋点 ID、A/B 测试分组、动态内容标识等。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 必须保留
shape、coords、href（或onclick）等核心属性，data-是附加项，不是替代项 - 例如：
<area shape="rect" coords="10,20,100,80" href="sun.htm" alt="太阳区域" data-track-id="hotspot-sun-v2" data-category="astronomy"> - 避免重复语义：不要写
data-href="sun.htm"，已有href就够了；也不要写data-shape="rect"，shape属性已明确声明 - JS 中读取时统一用
element.dataset.trackId（驼峰自动转换），而非getAttribute('data-track-id')
响应式场景下data-坐标的陷阱
传统 <area> 的 coords 是像素绝对值，图片缩放后热点会偏移。有人试图用 data-coords-mobile、data-coords-tablet 存多套坐标再 JS 切换——这不可靠，因为：
- 设备像素比（dpr）、缩放级别、CSS
transform: scale()都会影响实际渲染坐标，仅靠媒体查询无法覆盖 - 用户缩放页面时，
data-值不会自动更新，JS 也无法实时感知缩放比例变化 - 更严重的是：若图片通过
background-image渲染（而非<img>），<area>完全失效，data-更无从依附
真正可行的方案是放弃像素坐标，改用 SVG 或 canvas + 事件坐标归一化计算，data- 只存业务标识，不存位置。
什么时候该用data-，什么时候不该用
该用的情况：
- 需要为同一张图的不同区域打分析标签，如
data-ga-event="click-hotspot-venus" - 区域行为由后端配置驱动，前端只读取
data-action-type="modal"决定弹窗还是跳转 - 配合国际化，用
data-i18n-key="planet.sun.description"让 i18n 工具提取文案
不该用的情况：
- 想绕过
<area>自己实现“伪热点”（比如给<div>加data-area="true"再监听 click）——这破坏语义、键盘不可达、屏幕阅读器无法识别 - 把关键跳转地址藏在
data-url里，却不设href——SEO 和基础可用性直接丢失 - 用
data-模拟alt或title功能——这些有标准属性，强行替换会让辅助技术失效
最易被忽略的一点：data- 是纯客户端数据，服务端渲染（SSR）或静态站点生成（SSG）时若未同步注入，首次加载可能为空。别让它成为交互链路中的单点故障。
