D3拖动行为和onclick事件 - 首先单击忽略

Question

我在屏幕中间有一个svg区域，我通过使用D3拖动行为来移动一些SVG元素。在svg下方，我有div这样的选项：

<div id="gui-options">
    <div onclick="sortCards()">
        <span>Sort cards</span>
    </div>
    ...
</div>

当我在svg中拖动一些元素时，我必须单击两次才能触发sortCards()。第一次单击未注册。 sortCards()的实施对此问题并不重要。

我已经尝试在DOM准备好之后添加点击处理程序，但这没有任何区别。

禁用拖动功能时，我没有此问题。如果我在选项上单击两次，我只需单击一次即可切换其他选项。但如果我拖动一些元素，则需要两次点击才能“改变焦点”。

您对解决方案可能隐藏的地方有什么建议吗？