具有外部对象HTML输入文本的D3可拖动组导致其不可编辑

Question

我有一个可拖动的组，其中包含一个foreignobject，其中包含一个文本HTML输入。

但是，这会导致文本框无法选择/编辑，因为看起来拖动事件会吞下鼠标单击事件。

你能帮我解决这个问题吗？

源代码位于    http://bl.ocks.org/4334294

谢谢

Answer 1

Tore Nauta在d3-js google group

回答了这个问题

诀窍是停止传播。请参阅下面的最后一行代码：

handleGroup
        .append("foreignObject")
        .attr("width", 80)
        .attr("height", 37)
        .attr('x', 10)
        .attr( 'y', 5)
        .append("xhtml:body")
        .attr('xmlns','http://www.w3.org/1999/xhtml')
        .html("<input type='text' />")
        .on("mousedown", function() { d3.event.stopPropagation(); });