自定义响应式导航点击功能在移动端/平板端失效求助

嘿各位前端大佬，我最近折腾自定义响应式导航栏的时候碰到个棘手的问题，想请大家帮忙分析分析！

我写了一段点击按钮切换导航状态的代码，在桌面浏览器上测试完全正常，点击按钮能顺利给头部组件加上/移除active类，但到手机和平板上点击按钮就完全没反应了，试了好几种设备都这样，实在摸不着头脑。

先把我的代码贴出来：

var button = document.querySelector(".custom_button");
var header_component = document.getElementById("header_component");

button.addEventListener("click", () => {
  header_component.classList.toggle("active");
});

补充下背景：这个自定义头部是我自己搭建的，原本想通过这段代码实现移动端导航的展开收起交互，结果桌面端没问题，移动端就掉链子了。有没有朋友遇到过类似的情况？或者能给我指几个排查的方向呀？

备注：内容来源于stack exchange，提问作者maaz naveed