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

d3.js when click outside the elements, hide the element

本文关键字：元素 隐藏 外部 js d3 单击      更新时间：2024-02-11

我的页面中有一些提示。有一个工具提示（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);
    }
});

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

相关文章：