Javascript d3.js在元素外部单击时，隐藏元素

我的页面上有一些提示。有一个工具提示（div）包含一个输入框和一个按钮。我想在工具提示外单击，然后隐藏工具提示。我试过这个：

d3.select("body")
.on("click",function(){
    d3.select("#tooltip")
    .classed("hidden",true);
});

这是可行的，但是当我单击输入框想要输入一些值时，工具提示仍然隐藏。如何仅在工具提示外部单击时隐藏工具提示

我还尝试：

d3.select("body").filter().on("click",function(){})

但我不知道它是如何工作的，我不能选择除工具提示（div）之外的所有元素。

这里有一个解决方案：

var tooltip = d3.select("#tooltip");
var tooltipWithContent = d3.selectAll("#tooltip, #tooltip *");

function equalToEventTarget() {
    return this == d3.event.target;
}

d3.select("body").on("click",function(){
    var outside = tooltipWithContent.filter(equalToEventTarget).empty();
    if (outside) {
        tooltip.classed("hidden", true);
    }
});

---

jsIDLE:

Update-我简化了我的解决方案。我们使用

d3。selectAll（“#tooltip*”）

可以选择所有子节点及其子节点。我想知道如何通过javascript选择所有子节点及其子节点？不是d3.js。使用

Node.childNodes（）

只能选择节点下的子节点，但不包括“子节点的子节点”。@Yawei纯JavaScript也可以这样做。只需使用

document.queryselectoral（#tooltip*”）

——此方法得到广泛支持