Javascript在使用DOM调整屏幕大小时抛出15个控制台日志

因此，我有一个在

new MMenu

上调用的库，我只想在

mobile/touch

屏幕上初始化它，而不是在桌面上，因为它在桌面上呈现我的菜单

使用下面的代码，我希望以窗口宽度为目标并调用

新MMenu

，但每次屏幕调整大小时，它都会抛出我拥有的

控制台.log（菜单）

中的15个，我不知道为什么会这样做-我希望它在触摸屏/手机上处于活动状态，无论调整大小如何，只要它改回不在桌面上初始化它

以下是每次调整一点大小时的控制台日志：

下面是代码：

document.addEventListener('DOMContentLoaded', () => {
    if (window.addEventListener) {
        window.addEventListener('resize', function() {
            if (window.innerWidth < 760) {
                const menu = new Mmenu("nav#primaryNavigation", {
                    extensions: ["border-full"],

                    // Off canvas addon options
                    offCanvas: {
                        blockUI: true,
                        moveBackground: true,
                    },

                    // Screen reader addon options
                    screenReader: {
                        aria: true,
                        text: true,
                    },

                    // Fix scroll bug on touchscreens
                    scrollBugFix: {
                        fix: true,
                    },
                })

                console.log(menu);
            }
        })
    }
});

document.addEventListener（'DOMContentLoaded'，（）=>{
if（window.addEventListener）{
addEventListener（'resize'，function（））{
如果（窗内宽度<760）{
const menu=new Mmenu（“导航#主导航”{
扩展名：[“边框已满”]，
//非画布插件选项
非画布：{
布洛基：是的，
背景：是的，
},
//屏幕阅读器插件选项
屏幕阅读器：{
阿里亚：没错，
文本：对，
},
//修复触摸屏上的滚动错误
错误修复：{
菲克斯：没错，
},
})
控制台日志（菜单）；
}
})
}
});

更新：看起来我可以使用“onchange”而不是“resize”来确定屏幕大小

我还可以包括什么来支持这个答案

---

因此，widthResize提供的更改效果良好

每次调整窗口大小时都会调用调整大小事件。您可以改为使用window.matchMedia（）

如果只关心窗口大小是否小于或大于特定大小，则此媒体查询列表事件侦听器是理想的

您可以使用event.matches布尔值确定它是否匹配媒体查询

代码示例：

const div = document.querySelector("div");
const mediaQueryList = window.matchMedia(mediaQuery);

mediaQueryList.addEventListener('change', event => {
  console.log("window wodth",window.innerWidth);
  console.log("came in event listner code")
  if (event.matches) {
    document.body.innerHTML = 'The window is now 700px or under';
  } else {
    document.body.innerHTML = 'The window is now over 700px';
  }
})

参考：

---

当然可以。谢谢你的建议，我将遵循我的下一个答案。我已经编辑了我的原始答案，为这个@Pranjali添加了更多的细节谢谢，这很好用！你知道为什么我的问题被否决了吗？我问了所有适当的问题。