停止 onclick 传播“通过”其他元素

Question

在this codepen 中，单击一个节点会导致出现一个弹出框。最终，我希望链接和可点击的东西出现在弹出窗口中。问题是，现在当你点击它时，弹出框就会关闭。

我正在使用 onclick 事件，因此当您单击任意位置（HTML 正文）时，弹出框将关闭。我更喜欢在弹出窗口中说“x”关闭按钮，但我不知道如何在此单击关闭事件中取消包含弹出窗口。

d3.select("body").on("click", function() {
  console.log("click on body")
  tooltip.style("opacity", 0)
  tooltip.style("visibility", "hidden")
})

我认为“工具提示”上的 d3 stopPropagation 事件可能会在这里发挥作用，但我不确定。

感谢您的帮助！

Answer 1

大多数网站处理此问题的方式是同时添加弹出框和背景叠加层，然后仅将点击记录到背景叠加层。

例如：

d3.select("circle")
  .on("click", clickNode);

var tooltipBg = d3
  .select(".tooltip-overlay")
  .on("click", clickBackground);
var tooltip = d3.select(".tooltip");

function clickNode(event) {
  const [x, y] = d3.pointer(event);
  
  tooltipBg.style("display", "block");
  
  tooltip
    .style("left", `${event.layerX}px`)
    .style("top", `${event.layerY}px`)
    .style("display", "block")
    .transition()
    .duration(300)
    .style("opacity", 1);
}

function clickBackground() {
  tooltipBg.style("display", "none");
  
  tooltip
    .transition()
    .duration(300)
    .style("opacity", 0)
    .on("end", () => tooltip.style("display", "none"));
}

.tooltip-overlay {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  opacity: 0;
  display: none;
}

.tooltip {
  position: absolute;
  padding: 12px;
  z-index: 10;
  border: solid 2px red;
  width: 200px;
  height: 100px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 6px solid #eee;
  opacity: 0;
  display: none;
}

<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>

<svg height="500" width="500">
  <circle r="20" cy="50" cx="50"></circle>
</svg>

<div class="tooltip-overlay"></div>
<div class="tooltip"></div>