Beware of passive event listeners

[Shikkediel]

Second time posting, a single edit was enough to throw it in the bin. Kinda sad considering the actual regular spam. :-(

Anyway, not really a question… haven’t been coding much lately and coming across new things that others might not have noticed yet either.

Basically, browsers are sort of breaking the web regarding plugins. Many are dependent on preventing default action on either touchstart or wheel and some browsers are ignoring the W3 standard and implementing to ignore any preventDefault() you might have set. It only concerns the top levels, so window and document I think and not nested elements but that’s enough to make many plugins dysfunctional.

It’s relatively new, jQuery is not able to handle the issue yet either.

Caniuse

At this point the only option is to use plain event listeners inside jQuery and do feature detection for the passive option. Here’s a snippet:

function hasQuiet() {

  var cold = false,
  hike = function() {};

  try {
  var aid = Object.defineProperty({}, 'passive', {
  get() {cold = true}
  });
  window.addEventListener('test', hike, aid);
  window.removeEventListener('test', hike, aid);
  } catch (e) {}

  return cold;
}

It can be used to create an event listener with passive: false, which makes browsers not ignore preventDefault(), like this:

window.addEventListener('wheel', function() {

}, hasQuiet() ? {passive: false} : false);

Just a heads up, not too many topics on the subject with clear answers yet. Had to go through feature detection code to find the best approach.

[Shikkediel]

If the console gives messages such as these, the above is relevant:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

Most basic of demos – Chrome scrolls despite preventDefault() (console gives message):

codepen.io/anon/pen/RObdoM

[Shikkediel]

IE is throwing an error despite the try block. It accepts this however:

function hasQuiet() {

  var cold = false,
  hike = function() {};

  try {
  var aid = Object.defineProperty({}, 'passive', {
  get: function() {cold = true}
  });
  window.addEventListener('test', hike, aid);
  window.removeEventListener('test', hike, aid);
  } catch (e) {}

  return cold;
}

[Author]

Posts