How to set editable text (foreignObject) to be editable only on double-click in d3?

Question

I need to group some elements in a d3-group and make it draggable. This works so far. But one of the grouped elements needs to be an editable text. So I added a "foreignObject" (see code below). The problem, if I click on the text, it can't be dragged. Is it somehow possible to make it only editable if you double-click it? If yes, can you please post some code. Or if there is a better solution for editable text in d3, please feel free to post it with some code.

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