如果使用 Bacon.js 跟随拖动事件，我将如何取消单击事件？

【问题标题】：How would I cancel a click event if it was following a drag event using Bacon.js?如果使用 Bacon.js 跟随拖动事件，我将如何取消单击事件？
【发布时间】：2015-05-09 22:19:43
【问题描述】：

所以我有一些事件流：

let mouseUps = $(window)
  .asEventStream('mouseup');

let mouseDowns = $(window)
  .asEventStream('mousedown');

let mouseMoves = $(window)
  .asEventStream('mousemoves');

let drags = mouseDowns
  .flatMapLatest(() => mouseMoves.takeUntil(mouseUps));

let clicks = $(window)
  .asEventStream('click')
  .onValue(() => doThing());

我想忽略在拖动结束后立即触发的点击。我觉得必须有一种相当简单的方法来做到这一点，但我仍在为一些核心概念而苦苦挣扎。

【问题讨论】：

标签： javascript reactive-programming frp bacon.js

【解决方案1】：

解决方法是使用stream.awaiting()创建一个属性，可以用来过滤掉拖动后的点击。

var btn = $('#btn');
var mouseUps = btn.asEventStream('mouseup');
var mouseDowns = btn.asEventStream('mousedown');
var mouseMoves = btn.asEventStream('mousemove');
var drags = mouseDowns.flatMapLatest(function () {
    return mouseMoves.takeUntil(mouseUps);
});

var clicks = btn.asEventStream('click');
var isDraggingStarted = drags.awaiting(mouseDowns);

clicks.filter(isDraggingStarted.not()).onValue(doThing);

可以在此处找到示例：http://jsfiddle.net/a128jhxb/1/

【讨论】：

非常感谢！这是如此优雅和简单！很明显，在我完全理解这种思维方式之前，我还有一段路要走。