Does not use Passive Event Listeners to Improve Scrolling Performance

[blink1217]

Add the passive flag to all of the event listeners that Lighthouse has identified. In general, add the passive flag to every wheel, mousewheel, touchstart, and touchmove event listener that does not call preventDefault().

In browsers that support passive event listeners, marking a listener as passive is as easy as setting a flag:

document.addEventListener('touchstart', onTouchStart, {passive: true}); However, in browsers that do not support passive event listeners, the third parameter is a boolean to indicate whether the event should bubble or capture. So, using the syntax above may cause unintended consequences.

// Test via a getter in the options object to see if the passive property is accessed var supportsPassive = false; try { var opts = Object.defineProperty({}, 'passive', { get: function() { supportsPassive = true; } }); window.addEventListener("testPassive", null, opts); window.removeEventListener("testPassive", null, opts); } catch (e) {}

// Use our detect's results. passive applied if supported, capture will be false either way. elem.addEventListener('touchstart', fn, supportsPassive ? { passive: true } : false); To make this simpler you can use the feature detect from Detect It, eg:

elem.addEventListener('touchstart', fn, detectIt.passiveEvents ? {passive:true} : false);

[JacobDB]

Just to add to this – if you do indeed need to use preventDefault() within a eventListener, you can explicitly set { passive: false } to suppress the Lighthouse warning.

[ndvbd]

Any update here? Doing what @blink1217 suggested does not "kill"/"disable" the preventDefault which is found in the .js code?