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

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

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

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

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./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>

• javascript
• jquery
• passive-event-listeners

Share Improve this question Follow edited Apr 1, 2019 at 19:13 Shikkediel 5,2051616 gold badges4949 silver badges7979 bronze badges asked Apr 1, 2019 at 18:30 Muhammad TauseefMuhammad Tauseef 5122 silver badges1111 bronze badges 2

• You're not preventing the default action though. Not that you could because scroll doesn't have one. Must be another function causing it, are you sure Chrome is referencing the one above? – Shikkediel Commented Apr 1, 2019 at 19:00
• 1 Yes you are right I was wrong its not this code its just error there. – Muhammad Tauseef Commented Apr 1, 2019 at 21:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

In JQuery, it's still an open issue: https://github./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 });
        }
    }
};

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 autoplete), 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}