Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
This warning is triggered when a 'touchstart' event listener that blocks scrolling is added to your code and isn't marked as 'passive'. The use of passive listeners can improve performance by allowing the browser to continue scrolling without having to wait for JavaScript to finish executing.
In JavaScript, you can mark an event listener as passive by passing an options object as the third argument to addEventListener
, with the passive
property set to true
. Here's an example with a 'touchstart' event:
element.addEventListener('touchstart', handlerFunction, { passive: true });
In this code, the handlerFunction
won't prevent any default actions from occurring when the 'touchstart' event fires. This allows the page to maintain better responsiveness during scroll or touch events.
If the non-passive listener is being added by a third-party library, you might need to update the library or find another way to handle that functionality if the library doesn't support passive listeners.