3

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

http://mikeheavers.com/main/work

如果您单击代表技能领域的圆圈，则会显示具有特定技能的内部绿色圆圈。如果您按住代表技能的绿色圆圈，它们会动画、生长，然后在释放鼠标时收缩。但是，如果您只是单击圆圈，它们会变大，但不会恢复到以前的大小（mousedown我猜是没有注册） - 这会导致每次单击时圆圈都会不断变大。

有没有办法通过 d3 或通过 Javascript / jQuery 来防止点击行为？我只想要mouseup和mousedown。

4

1 回答 1

2

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

  • 如果您单击一个圆圈，无论单击多长时间（无论是否按住），它都会返回到其原始大小。
  • 如果您反复快速地单击一个圆圈，这就是它开始增长并且不会恢复到其原始大小的时候。
  • 如果您按住一个圆圈，然后将鼠标移出它，它会保持粉红色并且不会恢复到原来的大小。

我认为附加一个简单.on('mouseout', handler)的球体恢复到原来的大小将解决最后一个问题，这是非常明显的，以及mouseup由于移动到外面而错过的任何事件。您还可以将 a 附加mouseup到整个文档 ( d3.select('body').on('mouseup', handler))，这将捕获任何此类事件；那么你只需要记录最后一个被点击的球体。

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

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

于 2013-02-22T18:06:03.997 回答