我的页面上有一些提示。有一个工具提示(div)包含一个输入框和一个按钮。我想在工具提示之外单击,然后隐藏工具提示。我尝试了这个:
d3.select("body")
.on("click",function(){
d3.select("#tooltip")
.classed("hidden",true);
});
这可行,但是当我单击输入框要输入一些值时,工具提示仍会隐藏。仅在工具提示之外单击时,如何隐藏工具提示?
我也尝试过:
d3.select("body").filter().on("click",function(){})
但是我不知道它是如何工作的,我不能选择除tooltip(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/
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句