SyntaxFix

[javascript] Consider marking event handler as 'passive' to make the page more responsive

For those receiving this warning for the first time, it is due to a bleeding edge feature called Passive Event Listeners that has been implemented in browsers fairly recently (summer 2016). From https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md:

Passive event listeners are a new feature in the DOM spec that enable developers to opt-in to better scroll performance by eliminating the need for scrolling to block on touch and wheel event listeners. Developers can annotate touch and wheel listeners with {passive: true} to indicate that they will never invoke preventDefault. This feature shipped in Chrome 51, Firefox 49 and landed in WebKit. For full official explanation read more here.

See also: What are passive event listeners?

You may have to wait for your .js library to implement support.

If you are handling events indirectly via a JavaScript library, you may be at the mercy of that particular library's support for the feature. As of December 2019, it does not look like any of the major libraries have implemented support. Some examples:

Examples related to javascript

• need to add a class to an element • How to make a variable accessible outside a function? • Hide Signs that Meteor.js was Used • How to create a showdown.js markdown extension • Please help me convert this script to a simple image slider • Highlight Anchor Links when user manually scrolls? • Summing radio input values • How to execute an action before close metro app WinJS • javascript, for loop defines a dynamic variable name • Getting all files in directory with ajax

Examples related to jquery

• How to make a variable accessible outside a function? • Jquery assiging class to th in a table • Please help me convert this script to a simple image slider • Highlight Anchor Links when user manually scrolls? • Getting all files in directory with ajax • Bootstrap 4 multiselect dropdown • Cross-Origin Read Blocking (CORB) • bootstrap 4 file input doesn't show the file name • Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource • how to remove json object key and value.?

Examples related to angularjs

• AngularJs directive not updating another directive's scope • ERROR in Cannot find module 'node-sass' • CORS: credentials mode is 'include' • CORS error :Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response • WebSocket connection failed: Error during WebSocket handshake: Unexpected response code: 400 • Print Html template in Angular 2 (ng-print in Angular 2) • $http.get(...).success is not a function • Angular 1.6.0: "Possibly unhandled rejection" error • Find object by its property in array of objects with AngularJS way • Error: Cannot invoke an expression whose type lacks a call signature

Examples related to touch

• Consider marking event handler as 'passive' to make the page more responsive • Touch move getting stuck Ignored attempt to cancel a touchmove • How to remove/ignore :hover css style on touch devices • Fix CSS hover on iPhone/iPad/iPod • How to prevent sticky hover effects for buttons on touch devices • Draw in Canvas by finger, Android • Disable scrolling when touch moving certain element • How to implement swipe gestures for mobile devices? • Prevent Android activity dialog from closing on outside touch • Media query to detect if device is touchscreen

Examples related to hammer.js

• Consider marking event handler as 'passive' to make the page more responsive