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

Posted 2023-02-22

【中文标题】停止 onclick 传播“通过”其他元素

【英文标题】：Stopping onclick from propagating "through" other elements

【发布时间】：2022-01-15 11:11:21

【问题描述】：

在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 事件可能会在这里发挥作用，但我不确定。

感谢您的帮助！

【参考方案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.layerXpx`)
    .style("top", `$event.layerYpx`)
    .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  >
  <circle r="20" cy="50" cx="50"></circle>
</svg>

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

【讨论】：

谢谢！！我几乎让它工作了，@ 987654321@ 最后一个我无法弄清楚的方面是工具提示覆盖的高度和宽度似乎不尊重 100vh/显示高度方面。有没有办法让叠加层的宽度和高度始终覆盖我的显示空间？

我不明白你的意思。最好在一个单独的问题中提出这个问题，这些 cmets 不是为了跟进