d3.js当点击元素外部时，隐藏元素

Question

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

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

这个工作，但是当我点击的输入框中输入某个值，则提示仍然隐藏。只有当我在工具提示外单击时，我如何才能隐藏工具提示？

我也试过：

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

但我不它是如何工作的，我不能选择，除了工具提示（格）的所有元素。

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/