Javascript 如何在Mapboxgl中使用事件创建自定义控件？

使用mapboxgl，我添加了一个my custom map控件，它可以执行一些特殊的功能，我参考了office示例中的基本功能。但是当我完成代码时，我发现点击按钮的事件不起作用。我添加了stopPropagation函数。那么如何在mapbox控件中添加click事件呢？

mapboxgl.accessToken='pk.eyj1ijoieglhb2thbmcilchijoy2dlqc2d2nxlymghkbhu0btvtcgniowxsecj9.J5qsX13KKNT1slMGS MOLg'；
var map=new mapboxgl.map({
容器：'映射'，//容器id
风格：'mapbox://styles/mapbox/streets-v9“，//样式表位置
中心：[-74.50,40]，//起始位置[lng，lat]
缩放：9//开始缩放
});
类切换控件{
onAdd（地图）{
this.map=map；
this.container=document.createElement（'div'）；
this.container.className='我的自定义控件'；
const button=此按钮。_createButton（'monitor_button'））
this.container.appendChild（按钮）；
退回这个集装箱；
}
onRemove（）{
this.container.parentNode.removeChild（this.container）；
this.map=未定义；
}
_createButton（类名）{
const el=window.document.createElement（'按钮'）
el.className=类名称；
el.textContent='toggleControl'；
el.addEventListener（'单击'，（e）=>{
e、 style.display='none'
控制台日志（e）；
//e.预防违约（）
e、 停止传播（）
}，错）
返回el；
}
}
const toggleControl=新的toggleControl（）
map.addControl（切换控件，“左上角”）

显示地图
正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}

问题在于mapbox容器定位样式删除了鼠标事件处理（）：

因此，您需要将类

mapboxgl ctrl

（）添加到容器中以捕获事件：

this.container.className = 'mapboxgl-ctrl my-custom-control';

或手动设置此CSS属性：

.my-custom-control {
    pointer-events: auto;
}

[]

.my-custom-control {
    pointer-events: auto;
}