如何在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

Answer 2

x.removeListener(customFunction)检查此处的示例：https ://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/removeListener