Отключить прокрутку на листе js карте при наведении указателя мыши внутри информационного окна

Question

У меня есть Leaflet, в котором представлена ​​фоновая карта WMS с элементами на ней. Когда я щелкаю кластер функций, я внедряю перемещаемое окно с информацией о функциях, которое будет отображаться, и дом, основанный на данных, хранящихся в функциях. См. Снимок экрана.

В его нынешнем виде я не могу прокручивать этот список, но карта за ним по-прежнему увеличивается и уменьшается при использовании колеса прокрутки. Моя первоначальная мысль заключалась в том, что простой прослушиватель событий Javascript, использующий всплытие событий js, исправит это. Ниже я показываю структуру DOM:

    <div id="FeatureInfoMaster" data-tap-disabled="true" style="left: 136px; top: 648px;">
       <span class="map-featureinfo-featureInfoClose" onclick="$map.featureinfo.ToggleFeatureInfoDiv();">X</span>
       <div id="divFeatureContainer" class="map-featureinfo-container">
          <div id="divFeatureMasterDetail" class="map-featureinfo-masterdetail">
             <div id="divMasterView" class="map-featureinfo-master not-this">
                <div class="map-featureinfo-multiple-detail-wrapper">
                   <div id="divFeatureInfoDetailHeader" class="map-featureinfo-detail-header"> Der blev fundet 790 features </div>
                </div>
                <div class="map-featureinfo-multiple-features-detail-wrapper">
                   <!-- ngRepeat: feature in nfc.Features -->
                   <div ng-repeat="feature in nfc.Features" ng-click="nfc.selectFeature(feature);" class="ng-scope">
                      <div class="map-featureinfo-master-title ng-binding">F</div>
                   </div>
                   <!-- end ngRepeat: feature in nfc.Features -->
                   <div ng-repeat="feature in nfc.Features" ng-click="nfc.selectFeature(feature);" class="ng-scope">
                      <div class="map-featureinfo-master-title ng-binding">F</div>
                   </div>
                   <!-- end ngRepeat: feature in nfc.Features -->
                   <div ng-repeat="feature in nfc.Features" ng-click="nfc.selectFeature(feature);" class="ng-scope">
                      <div class="map-featureinfo-master-title ng-binding">S</div>
                   </div>
                   <!-- end ngRepeat: feature in nfc.Features -->
                   <!-- Loads and loads more lines like the ones above -->
                </div>
             </div>
             <div id="divDetailView" class="map-featureinfo-detail not-this">
                <div class="map-featureinfo-detail-wrapper">
                   <div class="map-featureinfo-detail-backbutton" onclick="$map.featureinfo.ToggleMasterDetailFeature(false);"> X  </div>
                   <div class="map-featureinfo-detail-prevbutton" ng-click="nfc.step(false);"> &lt;&lt;&lt;  </div>
                   <div class="map-featureinfo-detail-nextbutton" ng-click="nfc.step(true);"> &gt;&gt;&gt;  </div>
                   <div id="divFeatureInfoDetailHeader" class="map-featureinfo-detail-header ng-binding" ng-bind-html="nfc.UseHeader"></div>
                </div>
                <div class="map-featureinfo-detail-tekst">
                   <div ng-bind-html="nfc.UseHtml" class="ng-binding">
                      <div class="leaflet-popup-attributelist">
                         <table>
                            <tbody>
                               <!-- Some table containing the data -->
                            </tbody>
                         </table>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
       <script type="text/javascript">var mapapp = angular.module("featureInfoApp", []); mapapp.controller("featureInfoCtrl", function ($sce) { this.UseHtml = null;this.SelectedIndeks = 0;this.UseHeader = null;this.Features = null;this.SelectedFeature = null;this.step = function (forward) { var indeks = this.SelectedIndeks;if (forward) {   indeks = indeks +1;} else {   indeks = indeks -1;};if (indeks < 0)   indeks = this.Features.length-1;else if (indeks > (this.Features.length-1))    indeks = 0;this.selectFeature(this.Features[indeks]);};this.loaddata = function (data) { this.Features = data;this.SelectedIndeks = 0;if (data.length == 1) {   this.selectFeature(data[0]);} else {    this.SelectedFeature = data[0];   this.UseHtml = $sce.trustAsHtml(data[0].Html);   $map.featureinfo.MarkSelectedFeatureInMap(this.SelectedFeature);};};this.selectFeature = function (feature) { this.SelectedFeature = feature;this.UseHtml = $sce.trustAsHtml(feature.Html);this.UseHeader = $sce.trustAsHtml(feature.Title);this.SelectedIndeks = feature.Indeks;$map.featureinfo.MarkSelectedFeatureInMap(feature);$map.featureinfo.ToggleMasterDetailFeature(true);};});</script>
    </div>

Я пробовал что-то в этих строках (что частично работает):

$(document).ready(function () {
    const mapDiv = document.querySelector('#mapdiv');

    mapDiv.addEventListener('mouseover', function (e) {
        if (e.target.id == 'divMasterView') {
            console.log("enter")
            map.scrollWheelZoom.disable();
        }
    })

    mapDiv.addEventListener('mouseout', function (e) {
        if (e.target.id == 'divMasterView') {
            console.log("leave")
            map.scrollWheelZoom.enable();
        }
    })
})

Это так, что когда моя мышь зависает над полосой прокрутки прокрутка карты отключена, и мое колесо мыши теперь активирует функцию прокрутки окна информации о функциях. На мобильных устройствах функция перетаскивания работает без каких-либо изменений. Кто-нибудь знает, с какого угла атаковать эту проблему? Кажется, я больше ничего не могу с этим поделать и понятия не имею, что именно

Answer 1

Вы можете добавить L.DomEvent.disableClickPropagation(mapDiv);, чтобы отключить события карты под этим элементом DOM

Обновить

При открытии диалогового окна вызовите: L.DomEvent.disableScrollPropagation(document.getElementById('divFeatureMasterDetail'))