Added non-passive event listener for touchstart event with scroll lock

Question

Suddenly today out of nowhere I started getting it on every page of our site

Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive 

And this is not just one or two .. like thousands of them ....

They are furious.

The only way to stop the flow of violations is to comment out this line.

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script> 

I read other posts about what this violation means, but I really don’t see that I did something else between two hours ago and now (I did a full rollback to see if this helped)

It is almost as if someone had added an error to jquery.min.js, but I seriously doubt it, because then everyone will get it.

Any ideas? I tried to debug everything I could, and still don’t know what causes this?!?

UPDATE

I replaced all <button><md-tooltip>text</md-tooltip></button> width <button data-toggle="tooltip" title="text"></button> This allowed me to remove 99% of all violations,

Answer 1

Ok, digging this a bit more, this is not a new behavior, it was reported a while ago, and jQuery still hasn't fixed it.

The problem is that in order for the handler to be passive it must be sure that it will never call preventDefault() but jQuery does not know in advance ...

The only advice I can give you is to change the console logging level and delete "Verbose". Continue with ideas on how to solve this problem.

Answer 2

This solves the problem for me:

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

Answer 3

I use various events and this seems to solve my use case

 (function () { if (typeof EventTarget !== "undefined") { let func = EventTarget.prototype.addEventListener; EventTarget.prototype.addEventListener = function (type, fn, capture) { this.func = func; if(typeof capture !== "boolean"){ capture = capture || {}; capture.passive = false; } this.func(type, fn, capture); }; }; }()); 

Answer 4

The answer from Sergio is correct, add it to the bottom jquery script. If there is a problem with touch start and touch movement, just add the same code and replace the touch start with touch movement, for example like this:

 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 }); } } }; jQuery.event.special.touchmove = { setup: function( _, ns, handle ){ if ( ns.includes("noPreventDefault") ) { this.addEventListener("touchmove", handle, { passive: false }); } else { this.addEventListener("touchmove", handle, { passive: true }); } } };