I am trying to use the matchMedia / mediaQuery Web Api - I can successfully add a listener, but I am unable to remove the listener.

What am I missing?

This code demonstrates the problem - try printing the page - note you get TEST logged in the console even though you shouldn't...

var test=function(){
    console.log("TEST")
}

window.matchMedia('print').addListener(test);
window.matchMedia('print').removeListener(test);

I've tested and this occurs on both Chrome and Safari

I am trying to use the matchMedia / mediaQuery Web Api - I can successfully add a listener, but I am unable to remove the listener.

What am I missing?

This code demonstrates the problem - try printing the page - note you get TEST logged in the console even though you shouldn't...

var test=function(){
    console.log("TEST")
}

window.matchMedia('print').addListener(test);
window.matchMedia('print').removeListener(test);

I've tested and this occurs on both Chrome and Safari

• javascript
• media-queries
• listener

1 Answer 1

You’re creating a new media query list each time, so you’re not able to remove the listener from the first query.

var m = window.matchMedia('print');
m.addListener(test);
m.removeListener(test);