score:1

Accepted answer

Well there's a foreignObject that can be looked for in window.event.path after a click.

Check this snippet

var svg = d3.select("#drawRegion")
  .append("svg")
  .attr("width", "100%")
  .attr("height", "100%");
svg.append("rect")
  .attr("x", "0")
  .attr("y", "0")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("fill", "yellow");

const fObj = svg
.append("foreignObject");
fObj
  .attr("x", "10%")
  .attr("y", "10%")
  .attr("width", "80%")
  .attr("height", "40%");
 
            const inputArea = fObj
                .append("xhtml:input");
            inputArea
                .style("position", "absolute")
                .style("top", 0)
                .style("width", "100%")
                .style("height", "100%")
                .style("border-radius", "40px")
                .style("border", "none")
                .style("text-align", "center")
                .style("outline", "none");

svg.on("mouseup.inputDialogueInteractionName touchend.inputDialogueInteractionName", function() {
  let isInput = false;
  window.event.path.forEach(function(pathObj){
   if (pathObj.tagName =="foreignObject") isInput = true;
  })
  if (!isInput) alert("not input")
  else console.log("input")
            });
#drawRegion {
  width: 100%;
  height: 100%;
  display: inline-block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  position: relative;
}
<div id="drawRegion">

</div>
<script src="https://d3js.org/d3.v5.min.js"></script>


Related Query

More Query from same tag