Bootstrap 3.3.7移动端导航栏链接失效问题求助

我之前做类似的极简fixed导航栏时，也碰到过Safari响应式模式下这种离谱的问题——明明链接能被识别，点击却只触发导航收起，完全不跳转。结合踩坑经验，大概率是这几个原因导致的，你可以挨个排查试试：

1. 导航切换逻辑误拦截了链接的点击事件 #

最常见的坑是把导航收起/展开的事件绑定到了整个导航栏容器上，还加了event.preventDefault()或者event.stopPropagation()，导致点击链接时，事件先被容器的处理函数拦截，直接触发了收起逻辑，却阻止了链接的默认跳转行为。

修复方案： #

把事件绑定严格限定在切换按钮上，不要绑定到整个导航容器：

// 错误写法（会拦截内部所有元素的默认行为）
document.querySelector('.custom-navbar').addEventListener('click', function(e) {
  this.classList.toggle('collapsed');
  e.preventDefault(); 
});

// 正确写法
const toggleBtn = document.querySelector('.navbar-toggle');
const navbar = document.querySelector('.custom-navbar');

toggleBtn.addEventListener('click', function(e) {
  navbar.classList.toggle('collapsed');
  e.stopPropagation(); // 只阻止冒泡到父元素，不影响链接跳转
});

2. Safari响应式模式下的触摸/点击事件冲突 #

Safari在模拟移动设备时，会优先处理触摸事件，而有些自定义导航的逻辑没处理好触摸事件的触发顺序，导致模拟触摸点击时，只触发了导航收起，没触发链接跳转。

修复方案： #

• 先确保链接的交互属性正常：

.navbar-links a {
  pointer-events: auto; /* 强制允许链接接收点击/触摸事件 */
  cursor: pointer;
}

• 如果上面的方法没用，可以给链接手动绑定触摸事件，强制触发跳转：

document.querySelectorAll('.navbar-links a').forEach(link => {
  link.addEventListener('touchstart', function() {
    window.location.href = this.getAttribute('href');
  });
});

3. Fixed定位的层级或渲染问题（可能性较低） #

虽然你说链接能被识别，但也可以排查下是不是导航栏的z-index不够，或者有透明遮罩类的元素覆盖在链接上面，导致实际点击的不是链接本身。

修复方案： #

给导航栏设置足够高的层级，确保链接在最上层：

.custom-navbar {
  position: fixed;
  z-index: 9999; /* 确保导航栏在所有元素之上 */
}

.navbar-links a {
  position: relative;
  z-index: 1; /* 单独提升链接的层级 */
}

先从第一个原因开始排查，这是最容易踩的坑。如果还是不行，再试试后面的方法，应该能解决问题。

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