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

时间:2018-06-06 22:58:33

标签: javascript rxjs reactive-programming rxjs6

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

是因为takeUntil取消了外部可观察量吗?如何使代码工作。

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));

1 个答案:

答案 0 :(得分:2)

您需要将takeUntil放在switchMap内,如下所示:

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

takeUntil放在里面,组合的observable将取消订阅mousemoves mouseup事件后的mousedown观察点,但仍将订阅mousedown可观察对象。

放置在外面,它会在mouseup事件后取消订阅const appendQuery = require('append-query'); var newUrl = appendQuery(originalUrl, {width: '40', height: '40'}); 观察点 - 这就是它在第一次拖动后停止响应的原因。