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/