Separating single clicks from click and hold

Question

I need to implement a behavior:

• when element clicked - one thing happens
• but when it's clicked and held for more than one second, something else happens (e.g element becomes draggable) and then the first event never fires

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

Answer 1

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.