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

Question

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

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

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

我也尝试过：

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

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

Answer 1

这是一个解决方案：

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

JSFiddle：https ://jsfiddle.net/LukaszWiktor/53yok58w/