CODEWITHSUNDEEP
frprxjsbacon.jsreactive-extensions-js
iLemming
iLemming

Reputation: 36166

Separating single clicks from click and hold

I need to implement a behavior:

I think I know how to catch click&hold type of events, but how to distinguish between first and second?

Can you show me how to do that using this jsbin. I already made the "click, hold & drag" part, except that it is still firing the 'click' event after dragging the element and it shouldn't.

again: element clicked - one event, click and hold - element is draggable (even after mouse up) and when clicked again it's back to normal (undraggable) state.

I am not looking for a trivial solution, it has to be built using Rx.Observable or at least Bacon's streamEvent object

Thank you

Upvotes: 4

Views: 914

Answers (2)

JJuutila
JJuutila

Reputation: 361

Here is my proposed solution (with Bacon.js).

Upvotes: 2

artur grzesiak
artur grzesiak

Reputation: 20348

I think you were pretty close with your solution, but probably it is not possible to elegantly achieve what you want while using the browser's built-in click event.

HERE is my attempt to tackle your problem.

The main idea is to define your own click streams like so:

var clicks = downs.flatMapLatest(function(){
  return ups.takeUntil(Rx.Observable.timer(250));
});

var longDownsStart = downs.flatMapLatest(function(){
  return Rx.Observable.timer(1000).takeUntil(ups);
});

In case of clicks we wait max 250 ms after a mouse down for a mouse-up; in case of the latter we generate the event only if there was no mouse-up within 1000 ms.

There might be some corner cases in which the code does not work as intended.

Upvotes: 6

Related Questions