area标签点击穿透的根本原因是usemap与map的name属性未严格匹配，而非pointer-events设置问题；需确保usemap="#xxx"与<map name="xxx">完全一致（含大小写、连字符等），并用JS动态适配缩放后的coords坐标，同时移动端应统一用touchend并preventDefault避免300ms延迟引发的误触发。
area标签点击穿透是因为usemap匹配失败
点击热区没反应，不是pointer-events的问题，而是usemap和<map name>根本没对上。浏览器静默忽略所有<area>，你点的其实是底下的图片或容器本身——事件自然穿透到更下层元素。
必须逐字比对：usemap="#floor-plan"里的#floor-plan要和<map name="floor-plan">的name属性**完全一致**：大小写、连字符、有无空格，一个都不能错。Chrome 开发者工具里右键图片 → “检查”，如果点不到对应<map>，基本就是这里挂了。
-
usemap值漏掉#前缀 → 无效 -
name用下划线floor_plan但usemap写连字符#floor-plan→ 不匹配 -
<area>被包在<div>里，没直接嵌套在<map>内 → 浏览器无视
响应式缩放导致coords坐标偏移
原始图1200×800，你用CSS缩成600px宽，coords="0,0,100,100"仍按原图尺寸计算，热区实际只占屏幕左上角约50×50px，点不准是必然的。HTML/CSS 没法自动适配，纯靠pointer-events: none或z-index解决不了坐标失准问题。
必须用JS动态重算：
立即学习“前端免费学习笔记（深入）”；
- 读取
img.naturalWidth和img.naturalHeight拿到原始尺寸 - 用
img.offsetWidth / img.naturalWidth算出缩放比例 - 把每个
coords值乘以该比例（保留整数） - 在
window.resize和img.onload后重新赋值area.coords
area内部href触发跳转时的穿透干扰
如果<area href="https://example.com">点击后页面跳转，而新页面恰好在相同位置有个按钮，用户会误以为“点了两次”——这不是area本身穿透，而是跳转后旧页面残留的touch/click延迟触发了新页面元素。
移动端尤其明显，根源是300ms点击延迟未被消费：
- 别混用
click和touchend，统一用touchend并加{ passive: false } - 在
area上监听touchend后立即调e.preventDefault()，再手动window.location.href = ... - 若用Vue/React，绑定
@touchend.stop或event.stopPropagation()，避免冒泡到父容器触发其他逻辑
SVG替代area时pointer-events行为差异
如果换成SVG绘制热区，pointer-events值更细：HTML元素只认auto和none，但SVG支持visiblePainted、fill等。这意味着你可以让SVG路径仅对填充区域响应点击，而描边或透明背景不拦截事件——这对复杂热区叠加很有用。
但注意：<area>没有这种灵活性，它要么整个区域可点，要么全关。一旦你发现热区需要分层响应（比如外框悬停变色、内区点击跳转），就该考虑迁移到SVG方案，而不是硬调pointer-events。
真正卡住的点往往不在CSS，而在usemap拼写、坐标缩放、或移动端事件延迟处理——这三个地方漏查一个，pointer-events: none加再多也没用。
