如何使用反应式事件流同时处理鼠标和触摸事件

Question

我正在构建一个音频播放控制器，允许用户通过触摸和鼠标事件在音频文件中前后滑动。我应该如何使用响应式事件流来管理这些事件？

以下是我期望构建它的大致想法。

<div id="timeline">
  <span id="scrubber"></span>
</div>

然后，使用Bacon.js创建事件流。

var mousedowns = $('#timeline').asEventStream('mousedown');
var touchstarts = $('#timeline').asEventStream('touchstart');

var starts = Bacon.mergeAll(mousedowns, touchstarts);

var mousemoves = $('#timeline').asEventStream('mousemove');
var touchmoves = $('#timeline').asEventStream('touchmove');

var moves = Bacon.mergeAll(mousemoves, touchmoves);

var mouseups = $('#timeline').asEventStream('mouseup');
var touchends = $('#timeline').asEventStream('touchend');

var ends = Bacon.mergeAll(mouseups, touchends);

starts.onValue(function () {
  var repositionScrubber = moves.onValue(function (ev) {
    $('#scrubber').moveTo(ev.offsetX);
  });
  ends.onValue(function () {
    repositionScrubber.stop();
  });
});

我确定这样做是完全错误的，但是我对使用可观察流处理事件还很陌生，并且我还不知道有什么好的指南可以参考。希望能得到帮助！

（我相信上面的内容有很多错误，但我对使用可观察流处理事件还很新，也不知道有没有好的指南可以参考。如果您能提供帮助，我将不胜感激！）

- Jesse Hattabaugh

---

有一件事情你应该避免：像这里一样在onValue处理程序中添加订阅。这是一种反模式，正确的做法是使用组合器（这里是flatMap）。 - OlliM

Answer 1

这基本上是 RxJS 中经典的拖放示例drag and drop recipe.

RxJS 的最小工作示例大致如下：

var $timeline = $('#timeline');
var $scrubber = $('#scrubber');

var mouseDown = Rx.Observable.merge(
  Rx.Observable.fromEvent($timeline, 'mousedown'),
  Rx.Observable.fromEvent($timeline, 'touchstart'));

var mouseUp = Rx.Observable.merge(
  Rx.Observable.fromEvent($timeline, 'mouseup'),
  Rx.Observable.fromEvent($timeline, 'touchend'));

var mouseMove = Rx.Observable.merge(
  Rx.Observable.fromEvent($timeline, 'mousemove'),
  Rx.Observable.fromEvent($timeline, 'touchmove'));

var subscription = mouseDown.flatMapLatest(function(md) {

  // calculate offsets when mouse down
  var startX = md.offsetX;

  return mouseMove.takeUntil(mouseUp)
                  .map(function(mm) {
                       mm.preventDefault();

                       return {
                        left: mm.clientX - startX,
                       };
                  });
})
.subscribe(function(e) {
  $scrubber.css(e);
});

var $timeline = $('#timeline');
var $scrubber = $('#scrubber');
    
    var mouseDown = Rx.Observable.merge(
      Rx.Observable.fromEvent($timeline, 'mousedown'),
      Rx.Observable.fromEvent($timeline, 'touchstart'));
    
    var mouseUp = Rx.Observable.merge(
      Rx.Observable.fromEvent($timeline, 'mouseup'),
      Rx.Observable.fromEvent($timeline, 'touchend'));
    
    var mouseMove = Rx.Observable.merge(
      Rx.Observable.fromEvent($timeline, 'mousemove'),
      Rx.Observable.fromEvent($timeline, 'touchmove'));
    
    var subscription = mouseDown.flatMapLatest(function(md) {
      
      // calculate offsets when mouse down
      var startX = md.offsetX;
      
      return mouseMove.takeUntil(mouseUp)
                      .map(function(mm) {
                           mm.preventDefault();

                           return {
                            left: mm.clientX - startX,
                           };
                      });
    })
    .subscribe(function(e) {
      $scrubber.css(e);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.5.3/rx.all.js"></script>
<div id="timeline" style="height: 100px; width: 100px; background: yellow; position: absolute;">
  <span id="scrubber" style="height: 20px; width: 30px; background: green; position: relative;">Foo</span>
</div>

- paulpdaniels

Answer 2

var mousemove = Rx.Observable.merge(
            Rx.Observable.fromEvent(document, 'mousemove')
                .map((e) => { e.preventDefault(); return e; }),
            Rx.Observable.fromEvent(document, 'touchmove'))
                .map((e) => e.touches[0]),
        mouseup = Rx.Observable.merge(
            Rx.Observable.fromEvent(dragTarget, 'mouseup'),
            Rx.Observable.fromEvent(dragTarget, 'touchend')),
        mousedown = Rx.Observable.merge(
            Rx.Observable.fromEvent(dragTarget, 'mousedown'),
            Rx.Observable.fromEvent(dragTarget, 'touchstart')
                .map((e) => {
                    var rect = e.target.getBoundingClientRect();
                    e.offsetX = e.touches[0].pageX - rect.left;
                    e.offsetY = e.touches[0].pageY - rect.top;
                    return e;
                }));

mousedown
    .flatMap((start) => mousemove
        .map((mm) =>({
            left: mm.clientX - start.offsetX,
            top: mm.clientY - start.offsetY
        }))
        .takeUntil(mouseup))
    .subscribe(function (pos) {
        dragTarget.style.top = pos.top + 'px';
        dragTarget.style.left = pos.left + 'px';
    });

- MoLow