停止 onclick 传播 "through" 其他元素
Stopping onclick from propagating "through" other elements
在 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 事件会以某种方式在这里发挥作用,但我不确定。
感谢您的帮助!
大多数网站处理此问题的方式是同时添加弹出窗口和背景叠加层,然后仅将点击注册到背景叠加层。
例如:
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>
在 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 事件会以某种方式在这里发挥作用,但我不确定。
感谢您的帮助!
大多数网站处理此问题的方式是同时添加弹出窗口和背景叠加层,然后仅将点击注册到背景叠加层。
例如:
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>