如何从点击事件流列表中过滤掉最靠前的点击事件？

Question

我有一堆带有边界 { x, y, w, h } 的卡片，它们堆叠在一起并带有一些偏移 y 值。

我正在尝试在此卡片上实现点击事件。所以我在文档上有一个点击事件流：

let starts = fromEvent(document, 'mousedown'),
     ends = fromEvent(document, 'mouseup');

starts = starts.map(e => {
  let epos = eventPosition(e);
  return {
    start: epos,
    epos
  };
});

ends = ends.map(e => {
  return {
    epos: eventPosition(e)
  };
});

let clicks = starts.flatMap(startE => {
  return ends.first()
             .takeUntil(later(600));
});

function Card(n) {

  // inHitBounds returns true when event position is within the cards bounds.
  let inHitBounds = _ => hitTest(..._.epos, container.bounds());
  let insertN = _ => ({ ..._, n });

  // returns a stream which emits a card click event whenever it is in bounds of this card.
  this.clicks = clicks.filter(inHitBounds).map(insertN);
}

function CardStack(stack) {

  let dCards = stack.map(n => new Card(n));

  // returns a stream which emits a card click event with the upper most card that is clicked.
  this.clicks = ???

  // I tried this but it failed:
  this.clicks = dCards
                   .map(_ => _.clicks)
                   .reduce((acc, _) => acc.merge(_), Bacon.never)
                   .first();
}

Answer 1

实际上有一种方法 Bacon.groupSimultaneous 可以让您对来自多个来源的 "simultaneous" 事件进行分组。我写了一个例子：https://codesandbox.io/s/groupsimultaneous-example-cdthp

因此，您可以将卡片中的事件和一组事件 select 代表最上面的卡片的事件分组。

刚意识到 https://baconjs.github.io/api3/globals.html

的 API 文档中排除了此方法

否则你可能会重新考虑并创建一个监听 clicks 的流，然后根据 dCards 数组，选择与点击位置相交的最上面的卡片。

如何从点击事件流列表中过滤掉最靠前的点击事件？

How to filter out the top most click event from a list of click event streams?

javascript

rxjs

bacon.js