JQuery - How to marke touch and wheel event listeners as `passive`

Question

I'm using Google Page Speed Insights to optimize my page speed. It tells me to not use passive listeners to improve scrolling performance. I know how to do it with vanilla javascript.

window.addEventListener(
  'scroll',
  () => {
    handleScroll();
  },
  { passive: true }
);

How to do this with JQuery?

Answer 1

This worked for me. Just add it directly after jQuery has been loaded

// Passive event listeners //Two slight variations in setting the flag but seems to accomplish same thing

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