javascript - 如果在 svg 中单击的不是某个元素，而是使用 d3.js v5.4.0 的其他元素，则调用函数

Question

如果 svg 中没有单击任何元素，我如何调用函数，但其他元素使用 d3.js v5.4.0 ？

例如，我想要 alert仅当 xhtml:input 时才显示消息未单击(并且单击了其他元素之一)，但即使 xhtml:input 它也会显示如您所见 here 被点击.

换句话说，我想保留 fiddle 中存在的功能，但阻止 alert每当 xhtml:input 时都不会被执行被点击。

Answer 1

点击后可以在 window.event.path 中查找一个 foreignObject。

检查此片段

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>