为何RxJS的tap操作符影响流输出？移除后filter失效

这是一个很容易踩坑的浏览器事件对象特性导致的问题：部分浏览器（如Chrome）会重用鼠标事件对象——也就是说，当后续的mousemove事件触发时，之前的事件对象的属性会被覆盖更新。

为什么加tap就正常？ #

当你添加tap操作符并在里面调用directionChange时，会同步读取事件对象的movementX和movementY属性，这些值会被立即计算并固定下来。而如果没有tap，当filter操作符执行时，之前的事件对象（prevMouseEvent）已经被浏览器重用，它的movementX/Y已经是下一次事件的值了，导致directionChange的判断完全错误，自然无法正确过滤。

如何解决？ #

核心思路是在事件对象被重用前，把需要的属性提取出来，转换成普通的JavaScript对象，这样就能保留每次事件的原始值，不会被后续事件覆盖。

修正后的代码如下：

// 当鼠标主要移动方向改变时返回true
const directionChange = (prev, current) => {
  const dominantAxisMovement = Math.abs(current.movementX) > Math.abs(current.movementY) ? "X" : "Y";
  if (dominantAxisMovement === "X") {
    return Math.sign(current.movementX) !== Math.sign(prev.movementX);
  } else {
    return Math.sign(current.movementY) !== Math.sign(prev.movementY);
  }
};

const mouseDirectionSwitch$ = fromEvent(document, "mousemove")
  .pipe(
    // 先提取需要的属性，转换成普通对象，避免事件对象被重用
    map(event => ({
      movementX: event.movementX,
      movementY: event.movementY
    })),
    pairwise(),
    // 现在可以安全地移除tap，或者保留用于调试
    // tap(([prev, current]) => console.log(directionChange(prev, current))),
    filter(([prev, current]) => directionChange(prev, current))
  );

mouseDirectionSwitch$.subscribe(passed => console.log(passed));

补充说明 #

RxJS的tap操作符本身确实不会修改流中的数据，它只是执行副作用。这里的“依赖tap才能正常工作”只是一个表象，本质是tap的同步执行提前读取了事件属性，避免了被后续事件覆盖。真正的解决方案是隔离事件对象的引用，通过map提取关键属性，彻底解决浏览器事件重用的问题。

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