如果使用Bacon.js跟踪拖动事件,我将如何取消点击事件?

时间:2015-05-09 22:19:44

标签: javascript reactive-programming frp bacon.js

所以我有一些事件流:

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

我想忽略拖动结束后立即触发的点击次数。我觉得有一个相当简单的方法可以做到这一点,但我仍然在努力解决一些核心概念。

1 个答案:

答案 0 :(得分:3)

解决方案是使用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/