将单击与单击并按住分开答案

【问题标题】：Separating single clicks from click and hold将单击与单击并按住分开
【发布时间】：2015-02-24 21:18:13
【问题描述】：

我需要实现一个行为：

点击元素时 - 发生一件事
但是当它被点击并保持超过一秒时，会发生其他事情（例如元素变得可拖动），然后第一个事件永远不会触发

我想我知道如何捕捉 click&hold 类型的事件，但是如何区分第一个和第二个？

你能告诉我如何使用这个jsbin。我已经制作了“单击、按住和拖动”部分，只是在拖动元素后它仍在触发“单击”事件，它不应该。

再次：单击元素 - 一个事件，单击并按住 - 元素可拖动（即使在鼠标抬起后），再次单击时，它会恢复正常（不可拖动）状态。

我不是在寻找一个简单的解决方案，它必须使用 Rx.Observable 或至少培根的 streamEvent 对象来构建

谢谢

【问题讨论】：

我一直想知道“单击并按住”和“双击”是否需要一个小的移动余地。我的 Apple Magic 鼠标对轻微的震动非常敏感，或者我应该少喝咖啡。
此功能可以通过将鼠标放在对象上轻松实现。在鼠标按下事件期间，它是可移动的（这是许多场景中的默认设置）。此外，您可以绑定双击事件以允许可拖动状态，并绑定模糊类型事件以禁用拖动功能。
@Epik 基本上，如果我问一个问题：“如何计算金字塔的体积”，您会说：“任何三角形的角总和总是等于 180 度”。是的，我想您的评论很有帮助，但我不确定具体如何

标签： frp rxjs bacon.js reactive-extensions-js

【解决方案1】：

我认为您的解决方案非常接近，但使用浏览器的内置 click 事件可能无法优雅地实现您想要的。

HERE 是我尝试解决您的问题。

主要思想是像这样定义自己的点击流：

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 毫秒内没有鼠标向上时才会生成事件。

在某些极端情况下，代码可能无法按预期工作。

【讨论】：

您可以使用ups.takeWithTime(250) 而不是ups.takeUntil(Rx.Observable.timer(250)) 来简化点击流

【解决方案2】：

Here 是我提出的解决方案（使用 Bacon.js）。

【讨论】：

很难支持一个只是答案链接的答案...尝试使用 SO 的 sn-p 功能，或者至少像其他答案一样发布解决方案的重要部分