Question

右键单击可以使用上下文菜单，但是即使我在CSS中使用了display: none，上下文菜单也始终显示在单击之前的顶部。

$(document).on('mousedown', function(event) {
  if (event.which == 3) {
    $('#context').css({
      top: event.pageY,
      left: event.pageX
    });
    $('#context').show();
  }
});

#context {
  display: inline-block;
  position: absolute;
  background: #fff;
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5);
  display: none;
}

.context-menu {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="context">
  <ul class="context-menu">
    <li> <a href="#">Back</a></li>
    <li> <a href="#">Forward</a></li>
    <li> <a href="#">Save As...</a></li>
    <li> <a href="#">Reload</a></li>
    <li> <a href="#">Inspect Element</a></li>
  </ul>
</div>

Answer 1

const context = document.querySelector('#context');

const showContext = (x, y) => {
  context.style.transform = `translate(${x}px, ${y}px)`;
  context.classList.add('active');
};
const hideContext = () => {
  context.classList.remove('active');
};

document.addEventListener('mousedown', (e) => {
  const isVisible = context.classList.contains('active');
  const targetClosestCheck = e.target.closest(`#${context.id}`);

  if (targetClosestCheck) return;

  if (e.which === 3 && !isVisible)
    return showContext(e.pageX, e.pageY);

  if (e.which !== 3 && isVisible)
    hideContext();
});

// Disable context menu
document.addEventListener('contextmenu', e => e.preventDefault());

#context {
  display: inline-block;
  position: absolute;
  background: #fff;
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s .5s, opacity .5s;
}

#context.active {
	visibility: visible;
	opacity: 1;
 	transition: visibility 0s, opacity .5s;
}

.context-menu {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

<div id="context">
  <ul class="context-menu">
    <li> <a href="#">Back</a></li>
    <li> <a href="#">Forward</a></li>
    <li> <a href="#">Save As...</a></li>
    <li> <a href="#">Reload</a></li>
    <li> <a href="#">Inspect Element</a></li>
  </ul>
</div>

甚至在点击

1 个答案: