d3.js wenn klicken Sie außerhalb der Elemente, verstecken Sie das Element

Question

Ich habe einige Tootips in meiner Seite. Es gibt einen Tooltip (div), der ein Eingabefeld und eine Schaltfläche enthält. Ich möchte außerhalb des Tooltips klicken und den Tooltip ausblenden. Ich versuchte dies:

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

Dies funktioniert, aber wenn ich das Eingabefeld einen Wert eingeben möchten klicken, wird der Tooltip noch verbergen. Wie kann ich den Tooltip nur ausblenden, wenn ich außerhalb des Tooltips klicke?

ich auch versucht:

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

Aber ich weiß nicht, wie es funktioniert, kann ich nicht alle Elemente mit Ausnahme der Tooltip wählen (div). Hier

Answer 1

ist eine Lösung:

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/