JavaScript - 没有触发 window.matchMedia 的事件侦听器答案

【问题标题】：JavaScript - Event listener with window.matchMedia not triggeringJavaScript - 没有触发 window.matchMedia 的事件侦听器
【发布时间】：2020-08-08 15:16:53
【问题描述】：

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

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

我的脚本包含在我所有页面开头的 PHP 标头中。这是我得到的：

媒体查询监听器（包含在 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 元素。如有必要，我将提供任何其他相关代码。

【问题讨论】：

matchMedia返回的接口只有在媒体查询状态发生变化时才调用它的监听器。目前尚不清楚移动浏览器上的窗口“缩小”或“扩展”是什么意思。屏幕宽度不会改变，因为您通常无法调整移动浏览器窗口的大小。
你需要使用addListener而不是addEventListener
我可能在您对您要完成的任务的描述中遗漏了一些细节，但您为什么不直接使用 css media queries 呢？
@benvc CSS 媒体查询将解决上述问题，但 OP 可能有其他原因在 JS 中这样做
我正在使用 CSS 媒体查询，尽管我需要将 JS 与这些媒体查询结合使用。媒体查询被按钮的使用覆盖，因此如果我按下按钮在移动布局中隐藏我的导航栏，即使我重新展开窗口，它也会保持隐藏状态。

标签： javascript html css media-queries

【解决方案1】：

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

【讨论】：

具体来说，我假设MediaQueryList.addListener。
你必须使用 addEventListener 而不是 addListener whith change 事件，因为已弃用。

【解决方案2】：

对于需要其他解决方案的人：
您可以使用此功能：

function getWidth() {
  var maxWidth = Math.max(
        document.body.scrollWidth,
        document.documentElement.scrollWidth,
        document.body.offsetWidth,
        document.documentElement.offsetWidth,
        document.documentElement.clientWidth
   );
   console.log(maxWidth); // for testing only
   if(maxWidth === 776){
       //do sth
   }
   if(maxWidth === 992){
       //do sth
   }
   return maxWidth;
}
window.addEventListener("resize", getWidth);

现在您始终拥有屏幕宽度
这只是另一种做事方式......您可能想使用任何适合您的目的。

【讨论】：

这会降低性能，因为它会在每次调整大小事件时触发并重新计算每次调用 clientWidth 的布局

【解决方案3】：

每次调整窗口大小时，您都必须检查它。

window.addEventListener('resize', function(){
  mediaQueryCheck(mobileQuery);
});

【讨论】：

不真实且无关紧要。 matchMedia 返回的对象提供了一个事件处理程序，并且移动浏览器窗口不太可能调整大小，我猜这是 OP 的问题。