javascript - 我应该监听哪些事件以在 JavaScript 中隐藏自定义上下文菜单

Question

我想知道我应该监听哪些事件来隐藏我的自定义上下文菜单，一个 <div>从 oncontextmenu 中显示的元素事件处理程序，就像在 native 中一样。

Answer 1

有多种关闭 native 上下文菜单的操作:

• 点击外部: 监听 document.onmousedown并且，为了防止点击其他(有效)元素冒泡并关闭上下文菜单，您可以使用 Event.stopPropagation 停止它在中间处理程序中的传播。 .

  document.onclick也可以，但上下文菜单将保持可见，直到您释放鼠标按钮，而不是在您按下鼠标按钮时消失。

  在触摸设备中，你应该监听 document.touchstart ，因为某些设备(如 iPad)不会触发 click 事件。

• 按Esc:监听document.onkeydown并检查按下的键是否为 Esc 检查 KeyboardEvent.keyCode , KeyboardEvent.which和 KeyboardEvent.key .

• 更改选项卡/窗口:监听 window.onblur .

• 鼠标滚动:在 Chrome 中，监听 document.onmousewheel .在这里查看有关如何在不同浏览器上检测鼠标滚轮的详细答案:mousewheel,wheel and DOMMouseScroll in JavaScript .

  发生这种情况时，无论页面是否有滚动， native 上下文菜单都会关闭，至少在 Windows 10 上的 Chrome 中是这样。

这是一个简单的示例，其中包含我提到的一些选项:

const contextMenu = document.getElementById('contextMenu');
const MARGIN = 10;

document.oncontextmenu = (e) => {
  e.preventDefault();
  
  const target = e.target;

  if (contextMenu === target || contextMenu.contains(target)) {
    // A right-click on the context menu itself (or anything inside it) will NOT reposition it:
    return;
  }
  
  contextMenu.style.left = `${ Math.min(window.innerWidth - contextMenu.offsetWidth - MARGIN, Math.max(MARGIN, e.clientX)) }px`;
  contextMenu.style.top = `${ Math.min(window.innerHeight - contextMenu.offsetHeight - MARGIN, Math.max(MARGIN, e.clientY)) }px`;

  contextMenu.classList.remove('hidden');
};

contextMenu.onmousedown = (e) => {
  // We don't want this click to close the context menu, so we stop its propagation:
  e.stopPropagation();
};

// EVENTS THAT CLOSE THE CONTEXT MENU:

window.onblur = () => {
  contextMenu.classList.add('hidden');
};

document.onmousedown = () => {
  contextMenu.classList.add('hidden');
};

document.onmousewheel = () => {
  contextMenu.classList.add('hidden');
};

document.onkeydown = (e) => {
  if (e.key === 'Escape' || e.which === 27 || e.keyCode === 27) {
    contextMenu.classList.add('hidden');
  }
};

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  font-family: monospace;
}

#contextMenu {
  box-sizing: border-box;
  padding: 5px;
  width: 200px;
  min-height: 50px;
  max-height: calc(100vh - 20px);
  background: white;
  position: fixed;
  border-radius: 2px;
  box-shadow: 0 0 32px rgba(0, 0, 0, .25);
  transition: box-shadow ease-in 50ms;
}

#contextMenu:hover {
  box-shadow: 0 0 48px rgba(0, 0, 0, .25);
}

#contextMenu:active {
  box-shadow: 0 0 16px rgba(0, 0, 0, .25);
}

#contextMenuImage {
  width: 100%;
  border-radius: 2px;
  display: block;
}

.hidden {
  visibility: hidden;
}

<div id="contextMenu" class="hidden">
  <img id="contextMenuImage" src="https://media1.giphy.com/media/3o7aTskHEUdgCQAXde/giphy.gif" />
</div>

RIGHT-CLICK TO SEE THE CONTEXT MENU

请注意，在 oncontextmenu 处理程序中还有一个检查，以防止右键单击上下文菜单本身重新定位它。