如何从点击事件流列表中过滤掉最热门的点击事件?

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 方法，它可以让您对来自多个来源的"同时"事件进行分组。我写了一个例子：https://codesandbox.io/s/groupsimultaneous-example-cdthp

因此，您可以从卡片中对事件进行分组，并从一组事件中选择代表最顶层卡片的事件。

刚刚意识到此方法已从 API 文档中排除 https://baconjs.github.io/api3/globals.html

否则，您可能会重新考虑一下并创建一个侦听clicks的流，然后根据dCards数组选择与单击位置相交的最顶层卡片。