如何在 window.matchMedia 中添加 removeEventListener？

Question

这是我的问题：

我只想为小于“400px”的浏览器设置一个“addEventListener”点击方法。但是当我们调整浏览器大小时，我想去掉这个方法。

我的代码格式如下。如果我的浏览器超过 400px，我将继续使用该方法。我需要你的帮助。

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);

Answer 1

“使用未识别 EventTarget 上任何当前已注册的 EventListener 的参数调用 removeEventListener() 无效。”

您每次调用 customFunctions 时都定义了新版本的卡片函数，因此您无法将其与元素分离，因为它与您附加的函数不同。

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

如何在 window.matchMedia 中添加 removeEventListener？

How to add removeEventListener in window.matchMedia?

javascript

addeventlistener

removeeventlistener

matchmedia