d3.js - 启用mouseup / mousedown但阻止点击行为

Question

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

http://mikeheavers.com/main/work

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

有没有办法通过d3或javascript / jquery来阻止点击行为？我只想要鼠标和mousedown。

Answer 1

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

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

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

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

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

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