Nano Hash - криптовалюты, майнинг, программирование

Отключить прокрутку на карте leafletjs, когда мышь внутри информационного окна

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

Результат примера окна FeatureInfo

В нынешнем виде я не могу прокручивать этот список, но карта позади него по-прежнему увеличивается и уменьшается при использовании колеса прокрутки. Моя первоначальная мысль заключалась в том, что простой 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();
        }
    })
})

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


Ответы:


1

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

Обновить

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

25.05.2020
  • Я немного смущен тем, чего это достигает. Потому что, когда я сейчас нажимаю на функции, я отключаю клики, и диалоговое окно / div не появляется. И, конечно, это так, потому что я отключил клики на карте сейчас. Итак, какова была цель для этого? 26.05.2020
  • Пожалуйста, попробуйте: disableScrollPropagation вместо disableClickPropagation или когда у вас есть событие, вы можете вызвать stopPropagation(e) leafletjs .com/reference-1.6.0.html#domevent-stoppropagation 26.05.2020
  • это как отдельная вещь или вместе с моим текущим решением? Сам по себе он ничего не делает 26.05.2020
  • Это должно работать как автономное... Когда вы создадите для меня jsfiddle, может быть, я смогу узнать, что это такое 26.05.2020
  • я попробую 26.05.2020
  • Ты чертовски спасатель! Большое спасибо! 29.05.2020
  • Ницца! Как должен быть добавлен прослушиватель событий прокрутки, когда информационное окно закрыто? 25.05.2021
  • Если вы добавите disableScrollPropagation к элементу Dialog, вам не нужно будет снова добавлять события для сопоставления. 25.05.2021
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..