area标签无法获取精确像素坐标，不适用于在线选房系统；应改用canvas监听点击坐标并判断点在多边形内，或用绝对定位div模拟房间区域。
area 标签本身不支持直接响应坐标点击事件
浏览器原生 <area> 只能配合 <map> 和 <img> 实现热点区域跳转或简单高亮，**无法获取鼠标在图片上的精确像素坐标**。在线选房系统需要知道用户点的是“3栋502”还是“3栋503”，这要求你拿到相对于图片左上角的 x、y 值，而 <area shape="poly"> 的 coords 是静态定义的，不能反向推导点击点属于哪个房间。
必须用 canvas 或绝对定位 + 事件委托替代 area
真实项目中，几乎所有可交互户型图/选房页都放弃 <area>，改用以下两种可靠方式：
- 用
<canvas>绘制户型图，监听canvas.addEventListener('click', e => { ... })，再用e.offsetX/e.offsetY获取坐标，最后遍历每个房间的多边形顶点做「点是否在多边形内」判断（可用射线法） - 把户型图设为
<div>背景图，内部用带data-room-id的<div>元素按实际位置绝对定位（position: absolute; top: 120px; left: 85px; width: 60px; height: 40px;），点击时靠event.target.dataset.roomId直接识别房间 - 若仍想保留
<img>+<map>结构，只能退化为「粗粒度区域」：比如整层楼一个<area>，点中后弹出该层所有房间列表让用户二次选择——这不是真正意义上的“坐标选房”
area 的 coords 属性格式极易写错
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,..."/> 要求坐标成对出现且顺序闭合（首尾点不必重复），但常见错误包括：
- 漏掉逗号或混用空格和逗号：
coords="10 20,30 40"❌（空格分隔无效）→ 正确是coords="10,20,30,40" - 坐标值未对齐图片实际尺寸：如果原图是 1200×800，但你在设计稿里量的是 600×400 的缩略图，直接抄坐标会导致热点偏移一倍
- shape 误用：
rect需要 4 个值（左、上、右、下），不是宽高；circle需要 3 个值（圆心x、圆心y、半径）
移动端 click 事件在 area 上可能失效
部分 iOS Safari 和旧版 Android 浏览器对 <area> 的触摸支持不一致，表现为点击无反应。临时缓解办法是给 <map> 加 ontouchstart="" 空属性触发事件捕获，但治标不治本。更稳妥的做法是统一用 addEventListener('pointerdown', ...) 替代 click，并确保容器有 touch-action: manipulation。
立即学习“前端免费学习笔记（深入）”；
真正需要坐标的场景，别硬套 <area>。它适合静态导航图，不适合动态交互式选房——坐标计算、房间状态同步、多人并发锁定这些逻辑，得靠 JS 主导，而不是依赖 HTML 热区标签。
