javascript - 防止 Chrome 和 OpenLayers 2 中的 'Unable to preventDefault inside passive event listener' 错误

Question

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

最初，在此 Chrome 更改之前，如果我在 map 中使用鼠标滚轮，它会按预期放大和缩小，但不会滚动整个页面。如果我在 OpenLayers map 之外使用鼠标滚轮(如预期的那样)，它只会开始滚动页面。

当我现在在 map 中使用鼠标滚轮时，会显示以下错误:

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;

OL map 容器的 CSS 样式，但这似乎不起作用。

错误本身指向实际 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 map 的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 map 中使用我的鼠标滚轮时，它只会放大和缩小 map ，也不会开始滚动页面，并且不再出现“无法阻止默认”错误出现。

这似乎只是 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);
}