Отделение отдельных кликов от нажатия и удержания

Question

Мне нужно реализовать поведение:

• когда элемент нажал - происходит одна вещь
• но когда он щелкается и удерживается более одной секунды, происходит что-то еще (например, элемент становится перетаскиваемым), а затем первое событие никогда не срабатывает

Я думаю, что знаю, как ловить события типа click & hold, но как отличить первое от второго?

Можете ли вы показать мне, как это сделать с помощью этого jsbin. Я уже сделал часть "щелкни, удерживай и перетаскивай", за исключением того, что она все еще вызывает событие "щелкнуть" после перетаскивания элемента, и этого не должно быть.

еще раз: элемент нажал - одно событие, нажмите и удерживайте - элемент можно перетаскивать (даже после наведения мыши вверх), а при повторном нажатии он возвращается в нормальное (не удаляемое) состояние.

Я не ищу тривиальное решение, оно должно быть построено с использованием Rx.Observable или, по крайней мере, Бэкона streamEvent объект

Спасибо

Answer 1

Я думаю, что вы были довольно близки с вашим решением, но, вероятно, невозможно элегантно достичь того, что вы хотите, используя встроенный в браузер click событие.

ЗДЕСЬ моя попытка решить вашу проблему.

Основная идея состоит в том, чтобы определить свои собственные потоки кликов следующим образом:

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).