如何追踪浏览器地址栏、键盘及鼠标触发的历史前进后退事件？

一、三种触发方式的浏览器支持与追踪情况 #

不管是以下哪种方式触发前进/后退，主流浏览器不会单独追踪操作来源，只会统一触发历史栈变化相关的标准事件，但所有方式在现代浏览器中都能正常触发历史操作：

• 浏览器前进/后退箭头按钮
  所有现代浏览器（Chrome、Firefox、Safari、Edge等）均支持，点击后会触发历史栈变化，同时触发标准的popstate事件，浏览器不会额外标记这是按钮点击触发的。

• 绑定前进/后退的键盘按键
  比如Alt+左箭头（后退）、Alt+右箭头（前进）、部分浏览器的Backspace键，主流浏览器都支持这些默认按键映射，触发后同样会触发popstate事件。如果需要单独捕获按键动作，可以监听keydown/keyup事件，但这只能记录按键行为，无法直接确认是否真的触发了历史跳转（比如页面禁止了Backspace的默认行为）。

• 绑定前进/后退的鼠标按钮

  • 浏览器默认支持的鼠标侧键：多数现代浏览器会把鼠标的前进/后退侧键映射为历史操作，触发后同样触发popstate事件，兼容性良好。
  • 网页自定义绑定的鼠标按钮：如果是通过JS监听mousedown/mouseup事件，手动调用history.back()/history.forward()，此时不会自动触发popstate（除非你手动触发），但你可以直接在绑定的事件处理函数里统计操作，同时历史栈变化后依然会触发popstate。

二、事件捕获与统计实现 #

1. 核心捕获：popstate事件 #

这是监听历史前进/后退的标准方式，只要是浏览器主动修改历史栈（包括按钮、键盘、默认鼠标侧键触发），都会触发该事件。代码示例：

window.addEventListener('popstate', (event) => {
  // 这里处理统计逻辑，比如记录跳转次数、来源标记等
  console.log('历史栈发生变化，当前状态:', event.state);
});

注意：调用history.pushState()或history.replaceState()时不会触发popstate，只有当浏览器主动跳转或调用history.back()/forward()/go()时才会触发。

2. 区分操作来源的补充方案 #

如果需要统计具体是哪种方式触发的，可以通过提前标记的方式实现：

• 键盘触发标记：监听keydown事件，判断是否是触发前进/后退的按键组合，设置标记变量后在popstate中使用：

let isKeyboardTrigger = false;

window.addEventListener('keydown', (e) => {
  // 判断后退/前进按键组合，可根据需求补充其他按键
  const isBackKey = (e.key === 'ArrowLeft' && e.altKey) || e.key === 'Backspace';
  const isForwardKey = e.key === 'ArrowRight' && e.altKey;
  if (isBackKey || isForwardKey) {
    isKeyboardTrigger = true;
  }
});

window.addEventListener('popstate', () => {
  if (isKeyboardTrigger) {
    console.log('统计：键盘触发历史跳转');
    isKeyboardTrigger = false; // 重置标记
  } else {
    console.log('统计：非键盘方式触发历史跳转');
  }
});

• 鼠标按钮触发标记：如果是自定义绑定的鼠标按钮，直接在绑定函数里统计即可；如果是浏览器默认侧键，可以尝试通过mouseup事件的e.button属性判断（不同浏览器侧键对应的button值可能为2或3，兼容性一般，需要测试），同样通过标记变量在popstate中区分。

3. 兼容性说明 #

• popstate事件支持所有现代浏览器，包括Chrome 5+、Firefox 4+、Safari 6+、Edge 12+，无需担心兼容问题。
• 键盘和鼠标基础事件的兼容性也很好，仅鼠标侧键的button值存在少量浏览器差异。

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