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

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

防止Chrome＆OpenLayers 2中出现“无法阻止被动事件侦听器内的Default”错误

1 个答案: