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