Avoiding the 'Preventing default inside passive event listener' error in Chrome and OpenLayers 2

Question

Avoiding the 'Preventing default inside passive event listener' error in Chrome and OpenLayers 2

Utilizing OpenLayers2 (v2.12) to render a map in the user's browser has been my go-to method. However, since Chrome's recent update, using the mousewheel to zoom in and out of the OpenLayers map also inadvertently scrolls the entire page up and down.

Prior to this Chrome change, zooming in and out within the map functioned smoothly without affecting the page scroll. It was only when I used the mousewheel outside the OpenLayers map that the page would scroll, as intended.

However, now an error message pops up when trying to use the mousewheel within the 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

This error likely triggers the unwanted page scrolling behavior.

In response to similar queries related to this error, I attempted adding the

touch-action: none;

CSS style to the OL map container, but it failed to resolve the issue.

The error originates from code within the OpenLayers.js file rather than my own, creating uncertainty about how to rectify it.

The specific piece of code causing the error in 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
    },
}

particularly the e.preventDefault() function.

The uncompressed version of the OpenLayers file I'm referencing can be found at: https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.min.js

Here's the HTML code for the OL map:

<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>

I am seeking a solution that ensures using the mousewheel within the OpenLayers map solely zooms in and out without triggering page scrolling and eliminates the 'unable to preventDefault' error message.

This issue appears to be exclusive to Chrome, as Firefox and Edge behave correctly.

Appreciate any assistance provided.

javascript css google-chrome scroll openlayers

Answer 1

Answer №1

There appears to be a recurring issue with certain old examples in OpenLayers 2. Fortunately, running this script can help resolve 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);
}

Answer 2

There appears to be a recurring issue with certain old examples in OpenLayers 2. Fortunately, running this script can help resolve 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);
}

Avoiding the 'Preventing default inside passive event listener' error in Chrome and OpenLayers 2

Answer №1

Similar questions

handlebars and expressjs having trouble displaying the data

Searching for a specific string within an array using JavaScript: tips and tricks!

Determine the corner points of the DOM element following the application of CSS transforms such as rotateX, rotateY, and perspective

How come I keep running into the "is not a function" issue when trying to use the generateRequest function with Polymer's iron-ajax

Eliminating aliasing from an SVG circular element

The processes of setting and copying operate in distinct ways

What is the best way to create a subtle transition between two different backgrounds on a website's homepage

Unable to make API call within ReactJs Component due to technical issues

Unable to transmit an object containing a property that includes an array of other objects

What is the best way to utilize the JavaScript split() method to effectively split pasted text based on new lines?

Maximizing Bootstrap card size in Angular4: A step-by-step guide

How can I convert the left links in my navigation bar to a CSS drop-down menu to make it more responsive on small screens?

Scrape the CNMV.es website using Python to create a payload and execute JavaScript rendering

Is it possible to update a property value within a redux state by utilizing a value passed in when the action is invoked by the user?

Transforming a plain text field into an input field upon clicking a button or icon using Angular/Typescript

Newly created item not showing up in Bootstrap carousel

Is there a way to identify the language and style of a text in order to select the appropriate typeface? Alternatively, could someone recommend a different font for me to try?

Using jQuery to loop over an array and append to the ajax function

When transitioning between single-page Angular applications using Protractor, a "JavaScript error: document unloaded while waiting for result" may be encountered

What is the method to update an element when any of the items in an array is marked as "Confirmed"?