Separating individual clicks from clicking and holding

Question

I need to implement the behavior:

• when you click an item - one thing happens
• but when you press and hold for more than one second, something else happens (for example, the item becomes draggable), and then the first event never fires

I think I know how to catch click & hold event types, but how to distinguish the first and second?

Can you show me how to do this using jsbin . I already made the “click, hold and drag” part, except that it still fires the 'click' event after dragging and dropping the element, and it should not.

again: the element clicked - one event, click and hold - the element is dragged (even after the mouse is up), and when it is pressed again, it returns to the normal (non-split) state.

I am not looking for a trivial solution, it should be built using, Rx.Observableor at least a Bacon objectstreamEvent

thank

Answer 1

I think you were pretty close to your solution, but it is probably impossible to elegantly achieve what you want when using the inline event clickin the browser.

HERE - This is my attempt to solve your problem.

The basic idea is to define your own click flows, for example:

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

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

clicks 250 ; , 1000 .

, .

Answer 2

- ( Bacon.js).