Tuesday, July 25, 2017

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

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


In this post i am going to discuss about how to remove a jQuery violation "[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive" from chrome console.

Basically user can remove all the basic violations from just changing the type of log from "Verbose" to "Info".

visionfortech,javascript,Pratik Soni













But what if  user want to remove above violation from "Verbose" log Type ?
So Here is the solution.

Problem : 









The above violation is occur because e.preventDefault() will take much time and it will not passively load the component or we can say DOM.

So to remove that please include below code on top of your javascript.

Solution :

{passive:true}

// To remove the violation jquery-1.11.1.min.js:3 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.

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

//Remove violation code End

So now run your application and above violation will not appear into console.

Cheers...!!!Enjoy...!!!

Feel free to comment below your experience with above approach and If you still find any problem with above steps Let me know I would love to help you to resolve your  problem.

I hope this article will provided you solution which you are expecting. If you want to know more about Javascript check out Javascript World

If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to Visionfortech

6 comments:

  1. Good. Thanks for fix!

    ReplyDelete
  2. waht about the mousewheel event, tried this and didnt work

    ReplyDelete
    Replies
    1. just do the same for the other events that you want. Here it works!

      Delete
  3. Replies
    1. Thanks.
      Surelly i will do that for Angular6 and will post it soon.
      Stay tunned to http://www.visionfortech.com

      Delete

Protected by Copyscape