JavaScript - 不触发 window.matchMedia 的事件监听器

Question

我已经为这个问题寻找了无数的解决方案，但没有一个解决了我的问题。我非常简单地有一个导航栏，当在移动浏览器上时，它会消失并替换为一个按钮，其功能是显示和隐藏导航栏。

现在，我希望我的听众在窗口缩小时显示按钮并隐藏导航栏。当窗口展开时，应该隐藏按钮并显示导航栏。该按钮正常工作，因为媒体查询不会影响它。我的监听器似乎根本没有运行，除非重新加载页面。

我的脚本包含在 PHP header 中，该 header 包含在我所有页面的开头。这是我所拥有的:

媒体查询监听器 (包含在 header.php 代码中)

// ... navbar code, opening script tag, yadda yadda
function mediaQueryCheck(inputQuery) {
    var content = document.getElementById("navigation");
    if (inputQuery.matches) {
        // it matches
        content.style.display = "none";
    } else {
        // it does not match
        content.style.display = "block";
    }
}
var mobileQuery = window.matchMedia("screen and (max-width: 638px)");
mediaQueryCheck(mobileQuery);
mobileQuery.addEventListener(mediaQueryCheck);
// closing script tag

元素 #navigation是一个包含导航栏的 div 元素。如有必要，我将提供任何其他相关代码。

Answer 1

使用 addListener而不是 addEventListener解决了这个问题。