高德地图阻止鼠标点击事件

胡萝北
  • 243
map.on('click', showInfoClick);
 
function showInfoClick(e){
  let marker = new AMap.Marker({
    position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),
    content: `
      <div>
        <div>关闭按钮</div>
        <div>您在 [ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ] 的位置单击了地图!</div>    
      </div>`
  })
  map.add(marker)
}

高德地图:点击地图上任意一点,就在点击处展示一个弹窗,弹窗有关闭按钮。

问题就是,我点了弹窗上的关闭按钮后,弹窗是关闭了,但是触发了地图的鼠标单击事件。。
在点击关闭按钮的时候不想触发地图的单击事件,咋整

试了试像这样,也没啥用。。

button.addEventListener("click", function(event){
    event.stopImmediatePropagation();
}, true);

5.25更新:
尝试了第一种方式:设置bubble属性为false,没什么用
image.png

第二种尝试

因为我发现,当click关闭按钮的时候,是先调用showInfoClick后执行关闭相关的显示隐藏操作,于是我就把showInfoClick里面的请求接口之类的操作放在了setTimeOut定时器里,然后把clearTimeout放在了关闭按钮的逻辑里。投机取巧,问题解决。

回复
阅读 1.6k
2 个回答

你看下你是不是把这个设置为true了,这个默认是没有点击穿透的
image.png

是不是你点击弹窗上的关闭按钮发生了穿透,点击事件传到了地图上?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏