Mapbox自定义控件图例中的Href链接无法点击，原因何在？

Mapbox GL JS 默认会捕获地图控件区域的事件，用于处理拖拽、缩放等地图交互操作，这会导致自定义控件内的链接点击事件被拦截，无法正常触发。

可以通过以下两种方式解决：

方法1：CSS强制允许点击事件 #

在CSS中给自定义控件容器或链接元素添加pointer-events: auto，确保点击事件能正常触发：

.fs-legend-control {
    background: white;
    border-radius: 5px;
    padding: 5px 10px;
    box-shadow: 0 0 2px rgb(0 0 0 / 10%);
    margin: 10px;
    pointer-events: auto; /* 添加此行 */
}

/* 或者单独给链接设置 */
.my-legend a {
    color: #777;
    pointer-events: auto;
    cursor: pointer; /* 可选，明确显示可点击光标 */
}

方法2：手动绑定点击事件并阻止事件冒泡 #

在自定义控件的onAdd方法中，给链接绑定点击事件，阻止事件冒泡到地图，手动触发跳转：

class fs_legend_control {
    onAdd(map) {
        var fs_legend_control_html = ' \
        <div class="my-legend"> \
            <div class="legend-title">Piste Difficulty Legend</div> \
                <div class="legend-scale"> \
                    <ul class="legend-labels"> \
                        <li><span style="background:#339933;"></span>Novice</li> \
                    </ul> \
                </div> \
            <div class="legend-source">Source: <a href="https://www.example.com/">Read this concerning piste difficulty</a></div> \
        </div> \
        ';
            
        this._map = map;
        this._container = document.createElement('div');
        this._container.className = 'fs-legend-control';
        this._container.innerHTML = fs_legend_control_html;
        
        // 绑定链接点击事件
        const link = this._container.querySelector('.my-legend a');
        link.addEventListener('click', (e) => {
            e.stopPropagation(); // 阻止事件传递给地图
            window.location.href = e.target.href; // 执行跳转
            e.preventDefault();
        });
        
        return this._container;
    }   
    onRemove() {
        this._container.parentNode.removeChild(this._container);
        this._map = undefined;
    }
}

验证说明 #

两种方法都能解决链接无法点击的问题，方法1更简洁，方法2适合需要自定义跳转逻辑的场景。

内容的提问来源于stack exchange，提问作者spreaderman