usemap 与 map 的 name 不匹配导致热区完全失效：usemap 值须以 # 开头且与 map 的 name 完全一致（大小写、连字符、空格均需相同），否则无报错但点击无响应。

usemap 和 map 的 name 不匹配导致完全失效

这是最隐蔽也最常发生的错误：浏览器不会报错，但整个热区图点击无响应。关键点在于 usemap 的值必须以 # 开头，且与 中的 name 完全一致（大小写、连字符、空格都不能差）。

常见错误包括：

• → 缺 #，失效
• 配 usemap="#product-map" → 大小写不一致，失效
• 被包裹在
  里 → 不在文档流中，失效

  调试建议：右键图片 → 「检查」，看是否能高亮到对应 ；如果没反应，先查这个。

  coords 坐标基于原始像素，缩放后必然偏移

  的 coords 永远按图片文件本身的 naturalWidth/naturalHeight 计算，和 CSS 渲染尺寸无关。用 img { width: 50% } 缩放后，坐标若不重算，热区就会严重错位。

  实操要点：

  • 设计稿给的是「缩放后坐标」？必须反向换算：乘以 img.naturalWidth / img.offsetWidth
  • 临时加 border: 1px solid red 到 ，再用开发者工具「截图选区」比对坐标是否对齐
  • 响应式场景下，必须监听 img.addEventListener('load', updateCoords) 和 window.addEventListener('resize', updateCoords)，动态更新每个 的 coords

  area 缺 href 或 alt 导致语义与功能双崩

  必须同时含 href 和 alt 才具备完整功能。缺 href，点击无跳转行为；缺 alt，屏幕阅读器无法识别，搜索引擎也可能忽略该热区。

  

  Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

  实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

  下载

  正确写法示例：

  <area shape="rect" coords="0,0,100,100" href="/product/1" alt="Product A section">

  注意：href="javascript:void(0)" 可作为占位，但若需 JS 增强，务必在 onclick 中调用 event.preventDefault() 阻止默认行为。

  移动端触摸事件被父级意外拦截

  iOS Safari 和部分安卓 WebView 对非原生可点击元素极其敏感。哪怕只有一层父容器设置了 pointer-events: none，整个子树就彻底失活；缺失 touch-action: manipulation 会导致 300ms 延迟甚至点击吞没。

  检查路径：

  • 在开发者工具中选中目标区域，右侧「Computed」面板搜索 touch-action，确认值是 manipulation 或 auto（不能是 none 或 pan-x pan-y）
  • 逐级向上检查父容器的 pointer-events，尤其注意 Bootstrap 的 .disabled 类、Modal 遮罩、自定义 overlay 层
  • 表格整体设为可点击时，必须加：table { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

  真正容易被忽略的是：热区本身没有 cursor: pointer 或 role="link"，用户根本意识不到它可点——这不属于“失效”，但属于实际不可用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！