在Chrome& amp;中防止“无法阻止被动事件侦听器内的Default"错误. OpenLayers 2 [英] Preventing 'Unable to preventDefault inside passive event listener' error within Chrome & OpenLayers 2

问题描述

我使用OpenLayers2(v2.12)在用户的浏览器中加载并生成地图.最近，Chrome发布了一个更新程序，因此现在当我使用鼠标滚轮放大和缩小OpenLayers地图时，它也会导致整个页面上下滚动.

I use OpenLayers2 (v2.12) to load and generate a map in the user's browser. Recently, Chrome has released an update so that now when I use my mousewheel to zoom in and out of the OpenLayers map, it also causes the whole page to scroll up and down.

最初，在更改Chrome之前，如果我在地图上使用鼠标滚轮，它将按预期进行放大和缩小，但不会滚动整个页面.如果我在OpenLayers地图外部使用鼠标滚轮(如预期的那样)，它将仅开始滚动页面.

Originally, before this Chrome change, if I used my mousewheel within the map it would zoom in and out as intended, but it would not scroll the whole page. It would only start scrolling the page if I used my mousewheel outside of the OpenLayers map (as intended).

现在我在地图上使用鼠标滚轮时，会显示以下错误:

When I now use my mousewheel within the map, the following error is shown:

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

我认为这是导致页面滚动的错误.

I assume this is the error that is causing the page to scroll.

看着与此错误类似的问题，我尝试附加一个

Looking at similar questions to this error, I have tried to attach a

touch-action: none;

将CSS样式转换为OL映射容器，但这似乎不起作用.

CSS style to the OL map container, however this doesn't seem to work.

错误本身指向实际OpenLayers.js文件中的某些代码，而不是我的代码，因此我不确定如何解决此错误.

The error itself points to some code within the actual OpenLayers.js file and not my code and thus I am not completely sure how I go about fixing this error.

导致Openlayers.min.js文件内错误的代码是:

The code causing the error within the Openlayers.min.js file is:

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

尤其是e.preventDefault()函数.

notably the e.preventDefault() function.

我要引用的未缩小的OpenLayers文件是: https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.min.js

The unminified OpenLayers file that I am referencing is: https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.min.js

OL映射的HTML代码为:

The HTML code for the OL map is:

<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地图中使用鼠标滚轮时，它只会放大和缩小地图，也不会开始滚动页面，并且不再出现无法阻止默认值"错误出现.

I am looking for a solution, so that when I use my mousewheel within the OpenLayers map it only zooms in and out of the map, doesn't start scrolling the page too, and the 'unable to preventDefault' error no longer appears.

这似乎只是一个Chrome问题.它可以在Firefox和Edge中正常工作.

This only seems to be a Chrome problem. It works as intended in Firefox and Edge.

非常感谢您的帮助.

推荐答案

在一些旧的OpenLayers 2示例中，存在相同的问题.使用此脚本可以解决此问题.

There's the same problem on some of the old OpenLayers 2 examples. Using this script fixes it.

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);
}

这篇关于在Chrome& amp;中防止“无法阻止被动事件侦听器内的Default"错误. OpenLayers 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！