如何阻止Leaflet自定义控件触发地图点击与缩放事件？

你已经通过e.stopPropagation()解决了点击控件触发地图事件的问题，但双击时事件仍会冒泡到地图，触发默认的缩放行为。可以通过以下两种方式解决：

方法一：单独阻止双击事件传播 #

给控件按钮绑定dblclick事件，阻止事件冒泡到地图，同时可额外阻止浏览器默认双击行为：

let MyControlClass = L.Control.extend({  
  options: {
    position: 'topleft',
  },

  onAdd: function(map) {
    this.map = map;

    var div = L.DomUtil.create('div', 'leaflet-bar my-control');
    var flyToButton = L.DomUtil.create('button', 'my-button-class', div);

    flyToButton.innerHTML = `<a href="#" role="button" title="Voler vers" class="">
                          <i class="fa-solid fa-reply-all fa-flip-horizontal"></i>
                        </a>`;

    // 阻止点击事件传播
    L.DomEvent.on(flyToButton, 'click', function(e) {
      e.stopPropagation();
    }, this);

    // 阻止双击事件传播及浏览器默认行为
    L.DomEvent.on(flyToButton, 'dblclick', function(e) {
      e.stopPropagation();
      e.preventDefault();
    }, this);

    return div;
  }
});
let myControl = new MyControlClass().addTo(map);

方法二：使用Leaflet内置方法简化处理 #

Leaflet提供了L.DomEvent.disableClickPropagation()方法，可一次性阻止点击、双击等事件冒泡到父元素（地图），同时阻止浏览器默认行为，代码更简洁：

let MyControlClass = L.Control.extend({  
  options: {
    position: 'topleft',
  },

  onAdd: function(map) {
    this.map = map;

    var div = L.DomUtil.create('div', 'leaflet-bar my-control');
    var flyToButton = L.DomUtil.create('button', 'my-button-class', div);

    flyToButton.innerHTML = `<a href="#" role="button" title="Voler vers" class="">
                          <i class="fa-solid fa-reply-all fa-flip-horizontal"></i>
                        </a>`;

    // 一次性阻止点击、双击等事件传播到地图
    L.DomEvent.disableClickPropagation(div);

    return div;
  }
});
let myControl = new MyControlClass().addTo(map);

说明 #

L.DomEvent.disableClickPropagation()会自动处理click、dblclick、mousedown、touchstart等事件，避免事件冒泡到地图容器，同时阻止浏览器的默认行为（比如选中文本、双击缩放），是更推荐的方式。

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