我这里有一个数据可视化(第二个):
http://mikeheavers.com/main/work
如果您单击代表技能领域的圆圈，它会显示具有特定技能的内部绿色圆圈。如果您按住代表技能的绿色圆圈，它们会动画、变大，然后在松开鼠标时收缩。然而，如果你简单地点击圆圈，它们会变大，但不会恢复到原来的大小(我猜 mousedown 没有注册) - 这会导致一个圆圈每次都会不断变大它被点击了。
有没有办法通过 d3 或通过 Javascript/jQuery 来防止点击行为？我只想要 mouseup 和 mousedown。
最佳答案
我观察到的行为与您描述的不同。
- 如果您单击一个圆圈，无论单击时间有多长(无论是否按住)，它都会返回到其原始大小。
- 如果您反复快速单击一个圆圈，此时它会开始变大并且不会恢复到原来的大小。
- 如果您按住一个圆圈然后将鼠标移出它，它会保持粉红色并且不会恢复到原来的大小。
我认为附加一个简单的 .on('mouseout', handler) 来将球体返回到它们的原始大小将解决最后一个问题，这是非常明显的，任何遗漏的 mouseup 由于搬出而发生的事件。您还可以将 mouseup 附加到整个文档 (d3.select('body').on('mouseup', handler))，这将捕获任何此类事件;那么您只需要记录最后一个被点击的球体。
此外，要解决您原来的问题，您可以通过在 mousedown 中添加 e.preventDefault() 来确保触发 mouseup 事件> 事件。这将防止浏览器将快速点击变成双击或其他事件。
讨论这些问题的其他帖子:
关于javascript - 启用 mouseup/mousedown 但防止点击行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15027052/