在Chrome & OpenLayers 2中防止'Unable to preventDefault inside passive listener‘错误

Question

我使用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

OL地图的HTML代码是：

<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地图中使用鼠标滚轮时，它只会放大和缩小地图，而不会开始滚动页面，也不会再出现“unable to preventDefault”错误。

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

非常感谢您的帮助。

Answer 1

在一些旧的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);
}