close

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

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error Warning: Added non-passive event listener to a scroll-blocking ‘touchstart’ event [duplicate] in javascript. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How Warning: Added non-passive event listener to a scroll-blocking ‘touchstart’ event [duplicate] Error Occurs?

Today I get the following error Warning: Added non-passive event listener to a scroll-blocking ‘touchstart’ event [duplicate] in javascript.

How To Solve Warning: Added non-passive event listener to a scroll-blocking ‘touchstart’ event [duplicate] Error ?

  1. How To Solve Warning: Added non-passive event listener to a scroll-blocking 'touchstart' event [duplicate] Error ?

    To Solve Warning: Added non-passive event listener to a scroll-blocking 'touchstart' event [duplicate] Error var passiveEvent = false;
    try {
    var opts = Object.defineProperty({}, 'passive', {
    get: function () {
    passiveEvent = true;
    }
    });


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

    To Solve Warning: Added non-passive event listener to a scroll-blocking 'touchstart' event [duplicate] Error var passiveEvent = false;
    try {
    var opts = Object.defineProperty({}, 'passive', {
    get: function () {
    passiveEvent = true;
    }
    });

Solution 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);

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment