nohref 属性在现代 html 中完全无效，浏览器直接忽略；禁用 area 区域需同时移除 href、设置 pointer-events: none 和 tabindex="-1"，并视情况阻止事件冒泡。
nohref 属性在现代 HTML 中完全无效，浏览器直接忽略它；想让 area 区域“不可点击”，必须删掉 href，再配合 CSS 和 JS 控制交互行为。
nohref 在 HTML5 中已被废弃且无实际效果
HTML5 标准明确将 nohref 定义为 obsolete（过时）属性。Chrome 80+、Firefox 75+、Safari 14+ 等主流浏览器均不解析该属性——即使你写了 nohref 或 nohref="nohref"，该 area 仍会响应点击事件（只是不跳转），也仍可被键盘聚焦（Tab 键可达）。
旧文档中说“不加 href 就要加 nohref”是 HTML4 时代的惯性写法，现在不仅多余，还会误导维护者以为它起作用。
真正禁用 area 区域的三步组合操作
仅移除 href 是起点，但远远不够。现代禁用需同时处理视觉、焦点、事件三层：
- 删掉
href属性（这是基础，否则区域始终可导航） - 加
style="pointer-events: none;"阻止鼠标交互（否则 hover/click 仍触发） - 加
tabindex="-1"移出键盘焦点流（否则 Tab 键仍能选中它） - 若父级
<map></map>绑定了onclick，还需在area上加onclick="event.stopPropagation(); return false;"阻断冒泡和默认行为
为什么不能只靠 CSS 或只靠 JS？
单独用 pointer-events: none 会让屏幕阅读器无法识别该区域是否“有意禁用”，影响无障碍；单独用 tabindex="-1" 不阻止鼠标点击；而纯 JS 拦截（如 preventDefault）无法阻止初始聚焦或右键菜单。真实项目中常遇到这些情况：
- 邮件模板里嵌入图像映射（如 126 邮箱），CSS 支持有限，
pointer-events可能被忽略 → 必须搭配 JS 阻断 - 旧系统要求兼容 IE11，它不支持
pointer-events→ 得靠 JS +tabindex+ 移除href三重保险 - 动态生成的
area元素，JS 插入后未同步设置tabindex→ 键盘用户仍能意外聚焦到“看似禁用”的区域
替代方案：与其禁用，不如重构
如果业务逻辑频繁需要“部分区域可点、部分不可点”，area + map 的维护成本其实很高。更可持续的做法是：
- 改用 SVG：每个
<path></path>或<rect></rect>可独立控制pointer-events、tabindex和事件绑定，坐标计算也更直观 - 用 Canvas + 坐标判断：适合动态热区、复杂形状或频繁更新的场景，但需自行实现无障碍支持
- 拆分为多个
<img>+ CSS 定位：对简单布局更轻量，且天然规避area的语义与交互陷阱
真正容易被忽略的，不是怎么写 nohref，而是没意识到：一旦开始给 area 加各种补丁来“模拟禁用”，往往说明图像映射已超出它原本的设计边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
