nohref在html5中已废弃,现代浏览器完全忽略它;禁用area区域需同时移除href、设置pointer-events: none并添加tabindex="-1",必要时配合javascript阻止默认行为和事件冒泡。

nohref 在 <area> 中根本不起作用
HTML5 标准已将 nohref 定义为**过时(obsolete)属性**,现代浏览器(Chrome 80+、Firefox 75+、Safari 14+)完全忽略它。即使你写 <area shape="rect" coords="0,0,100,100" nohref>,该区域仍会响应点击事件(如果父 <map></map> 已绑定),或在无 href 时表现为“空链接”(可能触发默认跳转到 # 或页面顶部)。
真正控制“无效区域”的方式只有两种:不加 href + 配合 JavaScript 阻断,或直接移除该 <area> 元素。
验证 <area> 无 href 时的实际行为
仅移除 href 属性(不写 nohref)是让区域“不可点击”的基础,但需注意副作用:
- 部分旧版 IE 会将无
href的<area>视为无效,完全不渲染热区 - 现代浏览器中,无
href的<area>仍可被聚焦(Tab 键可达),且click事件仍会触发(只是不导航) - 若父
<map></map>绑定了onclick,该事件依然冒泡执行
所以纯 HTML 层面的“禁用”,必须搭配 JS:
<area shape="circle" coords="50,50,30" id="disabled-area"><script>
document.getElementById('disabled-area').addEventListener('click', e => {
e.preventDefault(); // 阻止默认跳转(如 href="" 或 href="#")
e.stopPropagation(); // 防止冒泡到 map
});
</script>
替代 nohref 的可靠方案:CSS + JS 双保险
要确保区域视觉上不可见、交互上彻底失效,推荐组合使用:
- 移除
href属性(不写任何链接) - 添加
style="pointer-events: none;"—— 禁用所有鼠标事件(包括 hover、click) - 配合
tabindex="-1"防止键盘聚焦 - 若需保留视觉占位但禁用交互,再加
opacity: 0.3或visibility: hidden(注意后者会丢失布局空间)
示例:
<area shape="poly" coords="10,10,50,10,50,50" style="pointer-events: none;" tabindex="-1">
容易被忽略的关键点
很多人以为加了 nohref 就万事大吉,结果在生产环境发现区域仍可点击或聚焦。真正起效的是:href 缺失 + pointer-events: none + tabindex="-1" 这三者缺一不可。尤其要注意 Safari 对 pointer-events 在 <area> 上的支持较晚(iOS 13.4+ 才稳定),若需兼容更老版本,必须 fallback 到 JS preventDefault 绑定。











