启用鼠标按下/松开事件但防止点击行为

Question

我这里有一个数据可视化（第二个）：

http://mikeheavers.com/main/work

如果您单击代表技能领域的圆圈，则会显示具体技能的内部绿色圆圈。如果按住表示技能的绿色圆圈，则它们会动画化，增长，然后在释放鼠标时缩小。然而，如果您只是单击圆圈，则它们会增大，但不会返回到先前的大小（我想没有注册mousedown）-这将导致每次单击时都会不断增大的圆圈。

是否有一种方法可以通过d3或通过Javascript / jQuery防止单击行为？我只想要mouseup和mousedown。

- mheavers

---

看起来你只是重新应用了我见过的d3例子。你基于哪个原始示例构建这一个的？ - Marc

好的，没有使用点击/鼠标按下行为的圆形打包示例 - 我自己添加了所有内容，但原始的非交互式圆形打包示例在这里：http://bl.ocks.org/mbostock/4063530 - mheavers

明白了。我之前想到过这个链接，觉得它可能与你所寻找的类似：http://www.nytimes.com/interactive/2012/09/04/us/politics/democratic-convention-words.html。虽然我对解决这个问题可能没有用处，但祝你好运。 - Marc

看了一下我发的那个例子，似乎他们是这样禁用拖动的：p.on("click.drag",null)。可能会有一个等效的 p.on("click",null)。 - Marc

click.drag只是一个附加了drag标签的click操作。这允许将多个“click”操作附加到特定元素上。 - Andrew Mao

Answer 1

我观察到与您描述的不同的行为。

- 如果单击一个圆，无论点击持续时间多长（是否保持），它都会返回到原始大小。 - 如果您反复快速地单击一个圆，它就会开始增大，并且不会返回到原始大小。 - 如果您按住一个圆然后将鼠标移动到它之外，它将保持为粉色并且不会恢复到其原始大小。

我认为附加一个简单的 .on('mouseout', handler) 来使球体恢复到原始大小将解决最后一个问题，这是一个相当明显的问题，以及由于移动而错过的任何mouseup事件。您还可以将mouseup附加到整个文档（d3.select（'body'）.on（'mouseup'，handler）），这将捕获任何此类事件; 然后，您只需要记录最后单击的球体。

此外，要解决您最初的问题，您可以确保通过在mousedown事件中添加e.preventDefault()来触发mouseup事件。这将防止快速点击转变为双击或其他浏览器事件。

其他帖子讨论了这些问题：

- mouseup event isn't always triggered - mouseUp event on drag

- Andrew Mao