Consider marking event handler as 'passive' to make the page more responsive

Question

I am using hammer for dragging and it is getting choppy when loading other stuff, as this warning message is telling me.

Handling of 'touchstart' input event was delayed for X ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive.

So I tried to add 'passive' to the listener like so

Hammer(element[0]).on("touchstart", function(ev) {
  // stuff
}, {
  passive: true
});

but I'm still getting this warning.

Answer 1

For those receiving this warning for the first time, it is due to a bleeding edge feature called Passive Event Listeners that has been implemented in browsers over the summer 2016. From https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md:

Passive event listeners are a new feature in the DOM spec that enable developers to opt-in to better scroll performance by eliminating the need for scrolling to block on touch and wheel event listeners. Developers can annotate touch and wheel listeners with {passive: true} to indicate that they will never invoke preventDefault. This feature shipped in Chrome 51, Firefox 49 and landed in WebKit. For full official explanation read more here.

See also: What are passive event listeners?

You may have to wait for your .js library to implement support.

If you are handling events indirectly via a JavaScript library, you may be at the mercy of that particular library's support for the feature. As of December 2019, it does not look like any of the major libraries have implemented support. Some examples:

• jQuery.js - ongoing issue: https://github.com/jquery/jquery/issues/2871
• React.js - ongoing issue: https://github.com/facebook/react/issues/6436
  React 17 discussion: https://github.com/facebook/react/issues/19651
• Hammer.js - closed due to no follow up: https://github.com/hammerjs/hammer.js/pull/987
• perfect-scrollbar - closed: https://github.com/noraesae/perfect-scrollbar/issues/560
• AngularJS - closed due to won't fix: https://github.com/angular/angular.js/issues/15901

Answer 2

The following library resolved the issue.
Simply add this code to your project.

<script type="text/javascript" src="https://unpkg.com/default-passive-events"></script>

If you need more information visit this library.

Answer 3

This hides the warning message:

jQuery.event.special.touchstart = {
  setup: function( _, ns, handle ) {
      this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") });
  }
};

Answer 4

For jquery-ui-dragable with jquery-ui-touch-punch I fixed it similar to Iván Rodríguez, but with one more event override for touchmove:

jQuery.event.special.touchstart = {
    setup: function( _, ns, handle ) {
        this.addEventListener('touchstart', handle, { passive: !ns.includes('noPreventDefault') });
    }
};
jQuery.event.special.touchmove = {
    setup: function( _, ns, handle ) {
        this.addEventListener('touchmove', handle, { passive: !ns.includes('noPreventDefault') });
    }
};

Answer 5

For those stuck with legacy issues, find the line throwing the error and add {passive: true} - eg:

this.element.addEventListener(t, e, !1)

becomes

this.element.addEventListener(t, e, { passive: true} )

Answer 6

The warning is only issued if you don't specify passive.

To suppress this warning you can:

addEventListener('touchstart', this.callPassedFuntion, { 
  passive: false 
})

By default, the browser listens for preventDefault. So, it will listen, but it will let you know: hey, you could improve your app here. If not, let me know you can't (by stating: passive: false).

I've created this answer from the comments of the accepted answer, which could be harder to find for anyone trying to find this.

Answer 7

I think in addition to touch-based events you can add scroll-based fixes so to prevent google page score from flagging it for Desktop vs Mobile:

// Passive event listeners (Tw0 slight variations in setting the flag)

jQuery.event.special.touchstart = {
    setup: function( _, ns, handle ) {
        this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") });
    }
};
jQuery.event.special.touchmove = {
    setup: function( _, ns, handle ) {
        this.addEventListener("touchmove", handle, { passive: !ns.includes("noPreventDefault") });
    }
};
jQuery.event.special.wheel = {
    setup: function( _, ns, handle ){
        this.addEventListener("wheel", handle, { passive: true });
    }
};
jQuery.event.special.mousewheel = {
    setup: function( _, ns, handle ){
        this.addEventListener("mousewheel", handle, { passive: true });
    }
};

Answer 8

I found a solution that works on jQuery 3.4.1 slim

After un-minifying, add {passive: true} to the addEventListener function on line 1567 like so:

t.addEventListener(p, a, {passive: true}))

Nothing breaks and lighthouse audits don't complain about the listeners.