Warning: Added non-passive event listener to a scroll-blocking 'touchstart' event [duplicate]

Question

I am getting a weird warning while opening the application in chrome.I don't know how to get rid of this warning

[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.

any one pls help me put on this.Thanks in advance

Answer 1

There is an update of the API of event listeners.

In short this:

document.addEventListener('touchstart', handler, true); 

becomes this:

document.addEventListener('touchstart', handler, {capture: true}); 

Since in your case you attach event listener to touchstart it should be like that:

document.addEventListener('touchstart', handler, {passive: true}); 

This way you can setup in advance which exact event and if the passive interface is supported:

var passiveEvent = false; try {     var opts = Object.defineProperty({}, 'passive', {         get: function () {             passiveEvent = true;         }     });     window.addEventListener("test", null, opts); } catch (e) { }  // in my case I need both passive and capture set to true, change as you need it.     passiveEvent = passiveEvent ? { capture: true, passive: true } : true;  //if you need to handle mouse wheel scroll var supportedWheelEvent: string = "onwheel" in HTMLDivElement.prototype ? "wheel" :     document.onmousewheel !== undefined ? "mousewheel" : "DOMMouseScroll"; 

And use like this:

elementRef.addEventListener("touchstart", handler, passiveEvent); 

More details on passive event listeners here: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md