Как добавить removeEventListener в window.matchMedia?
Вот моя проблема:
Я хочу иметь метод щелчка «addEventListener» только для размера браузера меньше «400 пикселей». Но когда мы изменяем размер браузера, я хочу удалить этот метод.
Формат моего кода ниже. Если я увеличу размер браузера более чем на 400 пикселей, у меня останется этот метод. Мне нужна твоя помощь.
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);
Я не думаю, что я полностью понимаю, поэтому я просто прокомментирую. if (screen.width < 400) { what.addEventListener ("resize", cb(){}) } else { what.removeEventListener ("resize", cb(){alert("listerner удален"})
Он использует более умный метод, чем старое изменение размера.....MDM. console.info(x, x.matches), чтобы увидеть, что происходит.
MatchMedia работает. Например, если я начну с размера браузера 1200 пикселей, а затем изменю размер до 300 пикселей, «щелчок» сработает после изменения размера.
"console.info(x, x.matches)" соответствует: true AND false, работает... Но removeEventListener не работает
Да. Я также проверяю это с помощью console.info(cardClick[0]);
"console.info(x, x.matches)" : MediaQueryList, а после изменения размера всегда MediaQueryListEvent
Ответы 2
«Вызов removeEventListener() с аргументами, которые не идентифицируют какой-либо в настоящее время зарегистрированный EventListener в EventTarget, не имеет никакого эффекта».
Вы определяете новую версию функции карты каждый раз, когда вызываете 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
Кроме того, нам нужно вывести cardClick и inner из функции, и это работает. Спасибо!!
x.removeListener(customFunction)
Посмотрите пример здесь: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/removeListener
Добро пожаловать в Stack Overflow! Пожалуйста, прочитайте Как ответить и отредактируйте пост соответствующим образом. Предоставление фрагмента кода в качестве решения — это хорошо, как и ссылка на ссылку. Однако лучше было бы перефразировать суть справочной ссылки здесь, чтобы ответ был хорошо объяснен без ссылки.
А где ваш ресайз eventListener?