使用JavaScript matchMedia实现移动端onclick事件失效如何解决

问题核心原因 #

你的代码存在作用域问题：你把mainappear函数定义在了navclick的条件块内部，属于局部函数，全局作用域访问不到，所以HTML里的内联onclick调用会直接抛出mainappear is not defined错误，自然无法触发功能。此外原逻辑没有处理窗口尺寸变化时的事件绑定/解绑，额外增加了复杂度。

最简修改方案 #

直接把屏幕尺寸判断逻辑放到点击函数内部即可，不需要监听resize事件，代码量更少，逻辑更清晰：

修改后的JavaScript代码 #

// 全局定义函数，点击时自动判断当前屏幕尺寸
function mainappear() {
  // 屏幕宽度大于等于1000px时直接退出，不执行任何操作
  if (window.innerWidth >= 1000) return
  const revee = document.getElementById("reviews-main")
  revee.style.visibility = revee.style.visibility === "visible" ? "hidden" : "visible"
}

HTML代码无需修改，保持原有写法即可 #

<div id="reviews-hover" onclick="mainappear()">
</div>
<div id="reviews-main">
</div>

方案说明 #

该方案只有在用户点击目标元素时才会做一次屏幕尺寸判断，小屏下触发显隐切换，大屏下点击无任何反应，完全符合你的需求。不需要额外监听窗口变化，也没有作用域冲突问题。

内容的提问来源于stack exchange，提问作者Soumya Roy