Unable to preventDefault inside passive event listener due to target being treated as passive - Chrome

Question

I used the following code and started to get the below mention error what is wrong with the code and what is the fix for it.

Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312

<script>
jQuery(window).scroll(function() {

  if (jQuery(this).scrollTop() > 400) {

    jQuery('.headerN').css("width", "100%");
    jQuery('.headerN').slideDown();
  } else {
    jQuery('.headerN').slideUp();
  }
});
</script>

Answer 1

I am not answering the original question but I am adding the solution which I used and fixed this issue "unable to preventdefault inside passive event listener due to target being treated as passive".

Why this occurs in jquery?

(S.Event.prototype = {
        constructor: S.Event,
        isDefaultPrevented: Ee,
        isPropagationStopped: Ee,
        isImmediatePropagationStopped: Ee,
        isSimulated: !1,
        preventDefault: function () {
            var e = this.originalEvent;
            (this.isDefaultPrevented = Ce), e && !this.isSimulated && **e.preventDefault();**
        },
        stopPropagation: function () {
            var e = this.originalEvent;
            (this.isPropagationStopped = Ce), e && !this.isSimulated && e.stopPropagation();
        },
        stopImmediatePropagation: function () {
            var e = this.originalEvent;
            (this.isImmediatePropagationStopped = Ce), e && !this.isSimulated && e.stopImmediatePropagation(), this.stopPropagation();
        },
    }),

I have taken the code snippet from jquery-3.5.js lib. The snippet in bold causes this issues since the said event(event for which you are getting the issue) is passive, so jquery is not able to preventDefault.

In my case, when i was trying to scroll the dropdown in ipad 11> and selecting any value from dropdown (jquery autocomplete), it was not allowing me to do so.

Solution

document.addEventListener('touchstart', function(event) {
jQuery('#'+event.target.id).trigger('click');
}, {passive: false}

This is just a workaround. So, basically, you have to trigger the event manually since the default behaviour is prevented by jquery lib.And the most important part is to mark that event as {passive: false}

Answer 2

In JQuery, it's still an open issue: https://github.com/jquery/jquery/issues/2871

You can do this with vanilla js on an event:

el.addEventListener('someEvent', someFn, { passive: false });

this is how someone on the github thread mentioned above created a workaround they implemented:

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