Chromium gives me a warning about my event listener not being passive.

Fine.

I'm not going to use event.preventDefault() there so I am willing to make it passive.

But then when I read the detailed explanation, the example uses Modernizr to check if the attribute is available.

addEventListener(document, "touchstart", function(e) {
  }, Modernizr.passiveeventlisteners ? {passive: true} : false);

But I don't have Modernizr installed, and I find a pain to set it up for this very specific use case.

So the question is: what happens if I blindly write:

$el.addEventListener('touchstart', () => {}, {passive: true})?

in old browsers?

My guess is that the object might be evaluated to true, is that correct? No error to be risen?

Chromium gives me a warning about my event listener not being passive.

Fine.

I'm not going to use event.preventDefault() there so I am willing to make it passive.

But then when I read the detailed explanation, the example uses Modernizr to check if the attribute is available.

addEventListener(document, "touchstart", function(e) {
  }, Modernizr.passiveeventlisteners ? {passive: true} : false);

But I don't have Modernizr installed, and I find a pain to set it up for this very specific use case.

So the question is: what happens if I blindly write:

$el.addEventListener('touchstart', () => {}, {passive: true})?

in old browsers?

My guess is that the object might be evaluated to true, is that correct? No error to be risen?

• javascript
• dom-events
• modernizr
• event-bubbling

1 Answer 1

{passive: true} will be evaluated as true so that should get rid of the Chromium warning, but according to the link you provided, it could have "unforseen results" on older browsers.

This method (also suggested in that link) seems pretty good to me, and it doesn't need any other libraries:

// Test via a getter in the options object to see if the passive property is accessed
var supportsPassive = false;
try {
  var opts = Object.defineProperty({}, 'passive', {
    get: function() {
      supportsPassive = true;
    }
  });
  window.addEventListener("testPassive", null, opts);
  window.removeEventListener("testPassive", null, opts);
} catch (e) {}

// Use our detect's results. passive applied if supported, capture will be false either way.
elem.addEventListener('touchstart', fn, supportsPassive ? { passive: true } : false);