Mapbox 默认为自定义控件容器设置了 pointer-events: none，导致内部 <a> 标签无法响应点击事件；只需在 CSS 中显式重置该属性即可恢复链接可点击性。
mapbox 默认为自定义控件容器设置了 `pointer-events: none`，导致内部 `` 标签无法响应点击事件；只需在 css 中显式重置该属性即可恢复链接可点击性。
在 Mapbox GL JS 中，所有自定义控件（如 fs_legend_control）会被自动包裹进一个由 Mapbox 管理的定位容器中，例如 .mapboxgl-ctrl-top-left（当添加到 "top-left" 位置时）。该容器的默认样式包含：
.mapboxgl-ctrl-top-left {
pointer-events: none;
}这一设置本意是避免控件区域干扰地图本身的交互（如拖拽、缩放），但它会透传地禁用整个子树的所有鼠标事件——包括你自定义 HTML 中的 <a href="https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c"> 链接，即使其 CSS 正常、DOM 结构完整、浏览器控制台无报错，链接仍表现为“不可点击”。
✅ 正确解决方案：在你的 CSS 中覆盖该行为，为控件容器启用指针事件：
/* 关键修复：允许自定义控件响应鼠标事件 */
.fs-legend-control {
pointer-events: auto; /* 或使用 'all'，但 'auto' 更符合语义 */
}
/* 可选：确保父级定位容器不拦截事件（更稳妥）*/
.mapboxgl-ctrl-top-left .fs-legend-control {
pointer-events: auto;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要仅对 <a> 标签单独设置 pointer-events: auto —— 因为父容器已禁用事件捕获，子元素无法触发。
- 避免全局重置 .mapboxgl-ctrl-top-left { pointer-events: auto }，否则可能意外激活其他控件（如 logo、缩放按钮）的非预期交互。
- 若控件含多个交互元素（如按钮、下拉菜单），统一使用 pointer-events: auto 于控件根容器即可，无需逐个修复。
? 补充建议：为提升可访问性与用户体验，可在链接上添加简单悬停反馈：
.my-legend a {
color: #007bff;
text-decoration: underline;
transition: opacity 0.2s;
}
.my-legend a:hover {
opacity: 0.8;
cursor: pointer;
}最终，你的自定义控件将正常渲染、样式生效，且链接可点击跳转——无需修改 JavaScript 逻辑或依赖 z-index、字体大小等无效尝试。这是 Mapbox 控件机制的已知约束，而非代码错误，针对性覆盖 pointer-events 即是最简洁、标准的解决路径。
