当鼠标进入信息框时，禁用leafletjs地图上的滚动

Question

我让Leaflet展示了带有功能的背景WMS地图。当我单击一组功能部件时，我实现了一个可移动的功能部件信息框，该框将根据功能部件中存储的数据显示在屏幕上，并显示dom。参见屏幕截图。

按现状，我无法在此列表中滚动，但是使用滚轮时，其后面的地图仍会放大和缩小。我最初的想法是，使用js事件冒泡的简单Javascript eventlistener可以解决此问题。下面我显示了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();
        }
    })
})

这样，当我的鼠标悬停在滚动条上方时，地图滚动被禁用，并且我的滚轮现在激活Featureinfo框的滚动功能。在移动设备上，拖动功能无需额外更改即可使用。有谁知道从哪个角度来解决这个问题？我似乎无法对此做更多的事情，而且我也一无所知

Answer 1

您可以添加L.DomEvent.disableClickPropagation(mapDiv);以禁用此DOM元素下方的地图事件