Предотвращение ошибки «Невозможно предотвратить дефолт внутри прослушивателя пассивных событий» в Chrome & OpenLayers 2 - PullRequest
Новая
       17

Предотвращение ошибки «Невозможно предотвратить дефолт внутри прослушивателя пассивных событий» в Chrome & OpenLayers 2

1 голос
/ 02 мая 2019

Я использую OpenLayers2 (v2.12) для загрузки и создания карты в браузере пользователя. Недавно Chrome выпустил обновление, так что теперь, когда я использую колесо мыши для увеличения и уменьшения масштаба карты OpenLayers, оно также вызывает прокрутку всей страницы вверх и вниз.

Изначально, перед этим изменением Chrome, если бы я использовал колесо мыши на карте, оно увеличивало и уменьшало масштаб, как предполагалось, но не прокручивало всю страницу. Прокрутка страницы началась бы только в том случае, если бы я использовал колесо мыши вне карты OpenLayers (как и предполагалось).

Когда я теперь использую колесо мыши на карте, появляется следующая ошибка: 

OpenLayers.min.js:2 [Intervention] Unable to preventDefault inside passive 
event listener due to target being treated as passive. See 
https://www.chromestatus.com/features/6662647093133312

Я предполагаю, что это ошибка, из-за которой страница прокручивается.

Глядя на похожие вопросы к этой ошибке, я попытался прикрепить 

touch-action: none;

Стиль CSS для контейнера OL-карты, однако это не похоже на работу.

Ошибка сама по себе указывает на некоторый код в самом файле OpenLayers.js, а не на мой код, и поэтому я не совсем уверен, как мне исправить эту ошибку.

Код, вызывающий ошибку в файле Openlayers.min.js: 

OpenLayers.Event = {
    stop: function(e, t) {
        t || (e.preventDefault ? e.preventDefault() : e.returnValue = !1),
        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = !0
    },
}

В частности, функция e.preventDefault ().

Унифицированный файл OpenLayers, на который я ссылаюсь: https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.min.js

HTML-код для карты OL: 

<div class="container-fluid col-xs-12" style="height: 100%;">
    <div class="row" style="height: 100%;">
        <div class="custom-col-md-10 col-sm-9 col-xs-8" style="height: 100%; overflow-y: hidden; max-height:850px;max-width:1600px;">
            <div class="panel" style="height: 100%; border: solid thin; border-color: darkblue;">
                <div class="panel-body" style="height: 100%; padding: 0px;">
                    <div tabindex="0" id="map" style="height: 100%; width: 100%;">
                    </div>
                </div>
            </div>
       </div>
    </div>
</div>

Я ищу решение, чтобы при использовании колесика мыши на карте OpenLayers он только увеличивал и уменьшал масштаб, не начинал прокручивать страницу и больше не отображал ошибку «неспособность предотвратить дефолт». появляется.

Это только проблема Chrome. Он работает так, как задумано в Firefox и Edge.

Большое спасибо за любую помощь.

1 Ответ

1 голос
/ 03 мая 2019

Та же проблема есть в некоторых старых примерах OpenLayers 2.Использование этого скрипта исправляет это. 

const eventListenerOptionsSupported = () => {
  let supported = false;

  try {
    const opts = Object.defineProperty({}, 'passive', {
      get() {
        supported = true;
      }
    });

    window.addEventListener('test', null, opts);
    window.removeEventListener('test', null, opts);
  } catch (e) {}

  return supported;
}

const defaultOptions = {
  passive: false,
  capture: false
};
const supportedPassiveTypes = [
  'scroll', 'wheel',
  'touchstart', 'touchmove', 'touchenter', 'touchend', 'touchleave',
  'mouseout', 'mouseleave', 'mouseup', 'mousedown', 'mousemove', 'mouseenter', 'mousewheel', 'mouseover'
];
const getDefaultPassiveOption = (passive, eventName) => {
  if (passive !== undefined) return passive;

  return supportedPassiveTypes.indexOf(eventName) === -1 ? false : defaultOptions.passive;
};

const getWritableOptions = (options) => {
  const passiveDescriptor = Object.getOwnPropertyDescriptor(options, 'passive');

  return passiveDescriptor && passiveDescriptor.writable !== true && passiveDescriptor.set === undefined
    ? Object.assign({}, options)
    : options;
};

const overwriteAddEvent = (superMethod) => {
  EventTarget.prototype.addEventListener = function (type, listener, options) {
    const usesListenerOptions = typeof options === 'object' && options !== null;
    const useCapture          = usesListenerOptions ? options.capture : options;

    options         = usesListenerOptions ? getWritableOptions(options) : {};
    options.passive = getDefaultPassiveOption(options.passive, type);
    options.capture = useCapture === undefined ? defaultOptions.capture : useCapture;

    superMethod.call(this, type, listener, options);
  };

  EventTarget.prototype.addEventListener._original = superMethod;
};

const supportsPassive = eventListenerOptionsSupported();

if (supportsPassive) {
  const addEvent = EventTarget.prototype.addEventListener;
  overwriteAddEvent(addEvent);
}
...