Leaflet.js - 在拖动过程中显示移动的矩形

Question

我有一个界面，在拖动地图的同时，在地图上绘制一个矩形。

我已通过此plunkr创建了此功能的精简版本。用于plunkr的JS是：

var map = new L.Map('leaflet', {
    layers: [
        new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
        })
    ],
    center: [36, -98],
    zoom: 6,
    renderer: L.svg({ padding: 100 })
});

var rectangle = L.rectangle(map.getBounds().pad(-0.1));

map.on("dragstart", function (e) {
  var b = map.getBounds().pad(-0.1);
  rectangle.setBounds(b);
  rectangle.addTo(map);
  map.on("drag", dragEvent);
});

map.on("dragend", function (e) {
  rectangle.removeFrom(map);
  map.off("drag", dragEvent); 
});

map.on("mouseup", function(e){
  console.log("mouseup!");
});

var dragEvent = function(e) {
  rectangle.setBounds(map.getBounds().pad(-0.1));
}

这似乎在Chrome和Internet Explorer中正常运行。我遇到的问题是Firefox（Windows上为v59.0.2 64位）。在FF中，如果单击并拖动地图，并在鼠标悬停在矩形上时释放鼠标按钮，则似乎缺少mouseup事件。这意味着如果将鼠标悬停在plunkr右侧的工具栏上，则在单击工具栏上的某个位置之前，您将无法看到预期的悬停行为。

我的问题，然后：

1. 有更好的方法来实现此功能吗？
2. 如果没有，任何人都知道为什么会发生这种情况？

Answer 1

  

在FF中，如果单击并拖动地图，并在将鼠标悬停在矩形上时释放鼠标按钮，则似乎缺少鼠标事件。

虽然看起来并不好看，但在setTimeout中包装矩形的删除会解决问题：

map.on("dragend", function (e) {
  setTimeout(function() {
    rectangle.removeFrom(map);
  }, 1);
  map.off("drag"); 
});

另一个解决方案是为矩形创建一个自己的mouseup处理程序：

map.on("dragend", function (e) {
  map.off("drag"); 
});

map.on("mouseup", function(e) {
  rectangle.removeFrom(map);
});

rectangle.on("mouseup", function (e) {
  rectangle.removeFrom(map);
  L.DomEvent.stopPropagation(e);
});

此外，可能有理由在https://github.com/Leaflet/Leaflet/issues

上打开问题