Leaflet点击地图切换L.control 如何避免marker点击触发切换

核心问题在于DOM事件冒泡机制：点击marker时，点击事件会从marker元素向上冒泡到地图容器#mapid，因此触发了你绑定在地图容器上的控制条切换逻辑。

最稳妥的修复方式是在原有点击回调中新增事件源判断，过滤掉点击marker、popup等地图交互元素的场景，这种方案不会破坏marker本身绑定的点击事件（比如弹窗弹出逻辑），不推荐直接给marker加stopPropagation，容易引发其他交互异常。

修改后的完整代码如下：

var dragged = false
window.addEventListener('mousedown', function () {
  dragged = false
})
window.addEventListener('mousemove', function () {
  dragged = true
})           
$("#mapid").on("click", function (e) {
  // 新增判断：点击源为marker或popup时直接终止逻辑
  if ($(e.target).closest('.leaflet-marker-icon, .leaflet-popup').length) {
    return
  }
  if (dragged == false && $(window).width() < 960) {
    return $(".leaflet-left").slideToggle(300) && $(".leaflet-right").slideToggle(300);
  }
})

如果需要优化移动端触摸响应速度，可以把事件绑定从click换成touchend，上述过滤逻辑完全通用。如果场景中还有其他需要排除的可点击地图元素，只需要在closest的选择器中追加对应类名即可。

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