How to add removeEventListener in window.matchMedia?

Question

Here is my problem:

I want to have an "addEventListener" click method only for browser size smaller than "400px". But when we resize the browser, I want to remove this method.

The format of my code is below. If I grow up the browser over 400px I continue to have the method. I want your help.

function customFunction(x) {

    var cardClick = document.getElementsByClassName("card");
    var inner = document.getElementsByClassName("card-inner");

    if (x.matches) {

        cardClick[0].addEventListener("click", cardFunction);

        function cardFunction() {
            // some code
            // inner[0].style......
        }

    } else {

        cardClick[0].removeEventListener("click", cardFunction);

    }
}

var x = window.matchMedia("(max-width: 400px)");
customFunction(x);
x.addListener(customFunction);

I dont think I fully understand so I will just comment. if (screen.width < 400) { whatever.addEventListener ("resize", cb(){}) } else { whatever.removeEventListener ("resize", cb(){alert("listerner removed"}) — ptts, Dec 18 '20 at 16:57
he use more clever method that old resize.....[MDM](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList). console.log(x, x.matches) to see what happening. — Robert, Dec 18 '20 at 16:58
The matchMedia works. For example, If I start with browser size 1200px and then I resize to 300px the "click" works after the resizing. — Bbabis, Dec 18 '20 at 17:05
"console.log(x, x.matches)" matches: true AND false, works... But the removeEventListener doesn't work — Bbabis, Dec 18 '20 at 17:05
"console.log(x, x.matches)" : MediaQueryList, and after the resizing always MediaQueryListEvent — Bbabis, Dec 18 '20 at 17:20

score 1 · Accepted Answer · answered Dec 18 '20 at 17:21

"Calling removeEventListener() with arguments that do not identify any currently registered EventListener on the EventTarget has no effect."

You define new version of card Function each time you call customFunctions so you can't detach it from element because is not the same function that you attach.

function cardFunction() {
   // some code
   // inner[0].style......
}

function customFunction(x) {

    var cardClick = document.getElementsByClassName("card");
    var inner = document.getElementsByClassName("card-inner");

    if (x.matches) {
        cardClick[0].addEventListener("click", cardFunction);

    } else {
        cardClick[0].removeEventListener("click", cardFunction);
    }
}

var x = window.matchMedia("(max-width: 400px)");
customFunction(x);
x.addListener(customFunction);
javascript

Also, we need to move cardClick and inner out of function, and it works. Thank you!! — Bbabis, Dec 18 '20 at 17:34

score 0 · Answer 2 · edited Feb 03 '23 at 13:09

0

x.removeListener(customFunction)

check example here: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/removeListener

edited Feb 03 '23 at 13:09

Adriaan

17,741
7
42
75

answered Feb 03 '23 at 13:07

Chiel

1
1

1

Welcome to Stack Overflow! Please read [answer] and [edit] the post accordingly. Giving a piece of code as a solution is good, as is giving a reference link. Better, however, would be to paraphrase the gist of the reference link here, such that the answer is well explained without the link. – Adriaan Feb 03 '23 at 13:10

How to add removeEventListener in window.matchMedia?

2 Answers2