Leaflet.js - отображение движущегося прямоугольника при перетаскивании

Question

У меня есть интерфейс, в котором при перетаскивании карты на карте рисуется прямоугольник.

Я создал урезанную версию этой функции через этот plunkr . JS, используемый для plunkr, таков:

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 (64-битная версия v59.0.2 в Windows). В FF, если вы щелкните и перетащите карту и отпустите кнопку мыши при наведении курсора на прямоугольник , кажется, что отсутствует событие mouseup. Это означает, что если вы наведите курсор мыши на панель инструментов справа от plunkr, вы не увидите ожидаемого поведения при наведении курсора, пока не нажмете где-нибудь на панели инструментов.

Мои вопросы, тогда:

1. Есть ли лучший способ реализовать эту функцию?
2. Если нет, у кого-нибудь есть идея, почему это происходит с FF?

Answer 1

В FF, если щелкнуть и перетащить карту и отпустить кнопку мыши при наведении курсора на прямоугольник, кажется, что отсутствует событие mouseup.

Хотя это выглядит не очень хорошо, но перенос удаления прямоугольника в setTimeout решит проблему:

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

Другим решением было бы создание собственного обработчика мышки для прямоугольника:

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