Question

我有两个相互叠加的画布

<div id="canvases" class="col-lg-11">
      <canvas id="canvas"  style="z-index: 1;"></canvas>
      <canvas id="canvas2" style="z-index: 3;"></canvas>
</div>

当用户试图保存图像时，我希望#canvas位于顶部，以便保存。

$("#canvases").on('mousedown', function (e) {
  if (e.which === 3){ //right click
    canvas.style.zIndex = "4";
    return;
  }

但是，当关闭上下文菜单时，我需要它回来。

是否有关闭上下文菜单的事件，或更有效的方法来保存#canvas？

注意： 2012年有类似的问题，但我认为这个问题没有得到充分回答。

Is there a close event for the browser contextmenu

答案间接检测上下文菜单是否已关闭（通过检查点击次数），但不会检查何时选择了菜单选项。

我想这是因为没有直接的方法来检测关闭上下文菜单，但是想知道它是否会从那时起出来。

Answer 1

afaik仍然无法检测到这一点，但可能还有另一种方法可以解决您的问题，而无需了解这一点。

如果这是一个选项，你可以在顶部的元素上使用pointer-event: none，这样就可以忽略顶层的鼠标事件，但这可能会对你的代码产生另一个副作用。

＆＃13;

.container {
  position: relative;
  left: 0px;
  top: 0px;
  width: 350px;
  height: 150px;
}

.ontop {
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

＆＃13;

<div class="container">
  <img src="http://placehold.it/350x150">
  <div class="ontop">
  </div>
</div>

＆＃13;

你可以做的另一件事但是我不确定它是否可以跨浏览器工作是在捕获阶段更改z-index上的mousedown并在几毫秒后重置它，这样事件仍然是你提升的元素。

＆＃13;

document.addEventListener('mousedown', function(e) {
  if (e.which === 3) {
    $('.ontop').css({
      zIndex: -1
    });
    setTimeout(function() {
      $('.ontop').css({
        zIndex: ''
      });
    }, 10);
  }
}, true);

＆＃13;

.container {
  position: relative;
  left: 0px;
  top: 0px;
  width: 350px;
  height: 150px;
}

.ontop {
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.5);
}

＆＃13;

<script   src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="container">
  <img src="http://placehold.it/350x150">
  <div class="ontop">
  </div>
</div>

＆＃13;

检测上下文菜单何时关闭的Javascript

1 个答案: