Question

我有一个类似于下面的场景，其中叠加检测鼠标悬停，它扩展了方块的可点击区域。我有一个右键单击菜单绑定到它并使用mouseleave的以下方法，当显示右键菜单时，叠加层不会突出显示 - 因为mouseleave被触发。

如果在右键单击期间如何突出显示叠加层？或者我可以使用与mouseleave和mouseover不同的事件吗？

var overlay = d3.select("#overlay");
var mouseOver = function() {
  return overlay.style("opacity", "0.5");
}
var mouseLeave = function() {
  return overlay.style("opacity", "0");
}
overlay.on("mouseover", mouseOver)
  .on("mouseleave", mouseLeave);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.js"></script>
<p>Hover over the square</p><br>
<svg id="canvas" height="300" width="300">
  <rect x="50" y="50" width="100" height="100" fill="black" />
  <rect id="overlay" x="0" y="0" width="200" height="200" fill="blue" style="opacity:0" />
</svg>

Answer 1

通过向mouseleave函数添加约束来解决问题。也就是说，要检查是否触发了右键菜单，并且继续是未触发菜单。

为此，我在右键菜单显示期间添加了一个类，并在菜单隐藏时将其删除，并在mouseleave期间检查类。

以下需要改进，但基本的想法得到了证明。

var overlay = d3.select("#overlay");
var mouseOver = function() {
  return overlay.style("opacity", "0.5");
}
var mouseLeave = function() {
  return overlay.classed("overlay-clicked") ? null : overlay.style("opacity", "0");
}
var menuOn = function() {
  return overlay.classed("overlay-clicked", true);
}
var menuOff = function() {
  return overlay.classed("overlay-clicked", false).style("opacity", "0");
}
d3.select("body").on("click", menuOff);
overlay.on("mouseover", mouseOver)
  .on("mouseleave", mouseLeave)
  .on("contextmenu", menuOn);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.js"></script>
<p>Hover over the square</p>
<br>
<svg id="canvas" height="300" width="300">
  <rect x="50" y="50" width="100" height="100" fill="black" />
  <rect id="overlay" x="0" y="0" width="200" height="200" fill="blue" style="opacity:0" />
</svg>

即使在右键单击菜单遍历期间也会突出显示叠加的事件

1 个答案: