Edit in JSFiddle

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>