如何阻止点击页面任意区域切换HTML Section？JS问题排查

为啥直接在document上用preventDefault拦不住跳转？ #

主要有这几个原因：

• 要是跳转是带锚点的<a>标签触发的（比如<a href="#section2">），它的默认跳转行为在自身的click事件阶段就执行了，等事件冒泡到document的时候，跳转已经完成，这时候preventDefault根本没用。
• 页面里可能有其他绑定在section或内部元素上的click事件，优先级比document的高，人家先执行了跳转逻辑，你后面拦也白搭。
• 有些跳转是JS主动修改window.location.hash实现的，这种不属于浏览器默认事件行为，preventDefault管不着。

具体解决办法 #

1. 直接拦截锚点标签 #

把所有带#的a标签都盯上，直接阻止它们的默认行为：

// 找出所有href以#开头的a标签
document.querySelectorAll('a[href^="#"]').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault(); // 阻止跳转
    e.stopPropagation(); // 顺便阻止事件冒泡，避免触发其他逻辑
  });
});

2. 全局检查点击目标 #

不确定是啥元素触发的跳转？就在document的click事件里往上遍历目标元素，碰到锚点就拦：

document.addEventListener('click', (e) => {
  let target = e.target;
  // 往上遍历父元素，直到找到document
  while (target && target !== document) {
    // 找到带#的a标签就拦截
    if (target.tagName === 'A' && target.href.startsWith('#')) {
      e.preventDefault();
      e.stopPropagation();
      break;
    }
    target = target.parentNode;
  }
});

3. 对付JS主动修改hash的情况 #

要是有人直接改window.location.hash实现跳转，就得监听hash变化，把它改回去：

window.addEventListener('hashchange', (e) => {
  // 恢复到之前的hash值
  e.preventDefault();
  // 用history里存的之前的hash，或者直接用当前hash（需提前记录）
  window.location.hash = window.history.state?.previousHash || window.location.hash;
});

// 提前记录当前hash，防止被篡改
let currentHash = window.location.hash;
document.addEventListener('click', () => {
  // 把当前hash存在history状态里
  window.history.replaceState({ previousHash: currentHash }, '', currentHash);
});

4. 检查有没有其他脚本捣乱 #

• 看看页面里有没有滚动插件、导航插件之类的第三方脚本，它们可能偷偷绑定了click事件执行跳转，先临时禁用试试，看是不是它们的锅。
• 要是你的事件监听器总是慢半拍，就用捕获模式绑定，在事件冒泡前就拦住：

document.addEventListener('click', (e) => {
  e.preventDefault();
}, { capture: true }); // 捕获模式，优先执行事件逻辑

验证方法 #

测试的时候在click事件里加个console.log(e.target)，每次点击看看输出的是啥元素，找到那个触发跳转的家伙，精准处理就行。

内容的提问来源于stack exchange，提问作者A P I