39

I am getting a weird warning while opening the application in chrome.I don't know how to get rid of this warning

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

any one pls help me put on this.Thanks in advance

yasarui
  • 6,209
  • 8
  • 41
  • 75
  • 4
    @Bergi, this does not entirely look like a dupe. the other referenced question only asks what passive event listeners are-- it does not ask how to silence the warning – mwag Jun 15 '18 at 03:05
  • @mwag It explains what they are and how to use them. The warning tells you to use them. (Which fixes the problem, not just silences the warning) – Bergi Jun 15 '18 at 10:56
  • @Bergi are you saying that "how to fix X?" is the same as "how to suppress a warning about X without 'fixing' it?" if so, here's one of probably thousands of SO questions that seem to disagree: https://stackoverflow.com/questions/49600947/how-to-suppress-the-requires-transitive-directive-for-an-automatic-module-warn (Note: **"The question is — how to suppress this warning, without fixing the actual issue**") – mwag Jun 15 '18 at 19:31
  • @mwag The question doesn't say "without fixing the actual issue", and the accepted answer just explains how to fix the issue - which is exactly the same what the duplicate is about. – Bergi Jun 15 '18 at 21:58
  • @mwag Also I don't think you can suppress the warning without fixing the issue. If you found a way to do that and want to write an answer, I'll happily reopen – Bergi Jun 15 '18 at 21:59
  • 1
    @Bergi so whether a question is deemed a dupe depends on whether an answer is known to exist by whoever is judging? Anyway, I did write an answer to how to suppress the warning without fixing it, in the question marked as a dupe, at least, if you consider a monkey patch that leaves the offending code in place to be the same as "not fixing". I suppose whether it's a fix could be argued either way. – mwag Jun 16 '18 at 02:17
  • I have a reason for unmarking this as a duplicate. I receive this warning with respect to a purported mousewheel event attached to a select object, but I never add such a listener to any of my select objects. What is going on here? – David Edwards Feb 13 '19 at 01:27
  • I agree this is clearly not a duplicate and why I am tired of SO. One dude makes it difficult – Fergus Oct 14 '19 at 00:07

1 Answers1

30

There is an update of the API of event listeners.

In short this:

document.addEventListener('touchstart', handler, true);

becomes this:

document.addEventListener('touchstart', handler, {capture: true});

Since in your case you attach event listener to touchstart it should be like that:

document.addEventListener('touchstart', handler, {passive: true});

This way you can setup in advance which exact event and if the passive interface is supported:

var passiveEvent = false;
try {
    var opts = Object.defineProperty({}, 'passive', {
        get: function () {
            passiveEvent = true;
        }
    });
    window.addEventListener("test", null, opts);
} catch (e) { }

// in my case I need both passive and capture set to true, change as you need it.
    passiveEvent = passiveEvent ? { capture: true, passive: true } : true;

//if you need to handle mouse wheel scroll
var supportedWheelEvent: string = "onwheel" in HTMLDivElement.prototype ? "wheel" :
    document.onmousewheel !== undefined ? "mousewheel" : "DOMMouseScroll";

And use like this:

elementRef.addEventListener("touchstart", handler, passiveEvent);

More details on passive event listeners here: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

Martin Chaov
  • 824
  • 7
  • 17