HTML5响应式模板移动端汉堡菜单内链接点击无响应求助

• 层级与点击属性冲突排查
  给汉堡菜单展开后的容器添加如下CSS，优先排查上层元素拦截点击、点击属性未正确配置的问题：

.hamburger-menu { /* 替换成你实际的汉堡菜单容器类名 */
  position: relative;
  z-index: 9999;
  pointer-events: auto;
}

很多模板会在菜单收起状态设置pointer-events: none禁用点击，展开状态忘记切换属性，添加上面的pointer-events: auto可以直接修复这类问题。

• 点击事件冒泡拦截排查
  打开浏览器控制台运行如下代码做测试：

document.querySelectorAll('.hamburger-menu a').forEach(item => {
  item.addEventListener('click', e => {
    e.stopPropagation();
  })
})

如果运行后点击链接可以正常跳转，说明是菜单父容器绑定的展开/收起事件拦截了子元素的点击冒泡，找到父容器的点击事件逻辑，添加判断：点击目标为a标签时不执行事件拦截逻辑即可。

• 触控事件兼容排查
  部分旧模板只适配了桌面端click事件，没有适配移动端触控事件，给链接添加兼容逻辑：

document.querySelectorAll('.hamburger-menu a').forEach(item => {
  item.addEventListener('touchend', e => {
    window.location.href = item.getAttribute('href');
  })
})

• 多余阻止跳转逻辑排查
  全局搜索模板JS代码里的e.preventDefault()或者return false逻辑，确认是否有误加在菜单链接点击事件上的代码，删除对应阻止默认跳转的逻辑即可。

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