html - 带有foreignObject HTML输入文本的D3可拖动组导致它不可编辑

Question

我有一个可拖动的组，其中包含一个外来对象，它本身包含一个文本 HTML 输入。

但是，这会导致文本框不可选择/不可编辑，因为拖动事件似乎吞噬了鼠标单击事件。

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

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

谢谢你

Answer 1

这个问题由d3-js 谷歌小组的 Tore Nauta 回答

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

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(); });