RXJS：第一次拖动后捕获拖动事件不起作用

【问题标题】：RXJS: Capture drag events not working after first dragRXJS：第一次拖动后捕获拖动事件不起作用
【发布时间】：2018-06-06 22:58:33
【问题描述】：

我有这段代码试图捕获所有拖动事件。此代码仅适用于第一次拖动和停止不适用于连续拖动。

是因为 takeUntil 取消了外部 observable 吗？我怎样才能使代码工作。

const { Observable, fromEvent } = rxjs;
const { takeUntil, switchMap } = rxjs.operators;

const mouseups = fromEvent(document.querySelector('.container'), 
'mouseup'); 
const mousedowns = fromEvent(document.querySelector('.container'), 
'mousedown');
const mousemoves = fromEvent(document.querySelector('.container'), 
'mousemove');

const source = mousedowns.pipe(
  switchMap(e => mousemoves),
  takeUntil(mouseups)
);

source.subscribe(e => console.log(e));

【问题讨论】：

标签： javascript rxjs reactive-programming rxjs6

【解决方案1】：

你需要把takeUntil放在switchMap里面，像这样：

const source = mousedowns.pipe(
  switchMap(e => mousemoves.pipe(
    takeUntil(mouseups)
  ))
);

将 takeUntil 放入其中后，组合的 observable 将在发生 mouseup 事件时取消订阅 mousemoves observable，但仍将订阅 mousedown observable。

放置在外面，它会在 mouseup 事件时取消订阅 mousedown observable - 这就是它在第一次拖动后停止响应的原因。

【讨论】：