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

发布于 2022-09-12 23:50:56 字数 1039 浏览 34 评论 0

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放在了关闭按钮的逻辑里。投机取巧,问题解决。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

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

﹉夏雨初晴づ 2022-09-19 23:50:56

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文