Context menu in web

<style>
  .context {
    position: absolute;
  }
  .elm-menu {
    margin: 8px;
    padding: 0 4px;
  }

  .elm-menu:hover {
    background-color: #eee;
  }

  .elm {
    height: 100px;
    width: 100px;
    margin: 8px;
    padding: 0 4px;
    background-color: yellow;
    color: blue;
  }

  .cmenu {
    background-color: #fff;
    z-index: 2300;
    display: block;
    position: absolute;
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    cursor: default;
    margin-top: -4px;
    min-height: 50px;
    min-width: 100px;
    max-height: 640px;
  }
</style>
<div id="cmenu" class="cmenu" style="display:none">
  <div class="elm-menu">default</div>
  <div class="elm-menu">menu</div>
</div>
<div id="cmenu1" class="cmenu" style="display:none">
  <div class="elm-menu">elm1</div>
  <div class="elm-menu">menu</div>
  <div class="elm-menu">contextuel</div>
</div>
<div id="cmenu2" class="cmenu" style="display:none">
  <div class="elm-menu">elm2</div>
  <div class="elm-menu">menu</div>
  <div class="elm-menu">contextuel</div>
</div>
<div class="context">
  <div data-menu="#cmenu">Text for test default menu</div>
  <div data-menu="#cmenu1" class="elm">Box for test menu 1</div>
  <div data-menu="#cmenu2" class="elm">Box for test menu 2</div>
</div>
<script>
  let context = document.querySelector(".context");
  context.addEventListener('contextmenu', elem => {
    elem.preventDefault();

    // Show menu
    document.querySelectorAll(".cmenu").forEach(i => i.style.display = "none");
    if (!elem.srcElement.dataset.menu) return;
    let menu = document.querySelector(elem.srcElement.dataset.menu)
    menu.style.display = "block";
    let mouse = (() => {
      console.log(elem);
      if (elem.layerX || elem.layerY)
        return {
          x: elem.layerX + 10,
          y: elem.layerY + 10
        }
      return {
        x: 0,
        y: 0
      }
    })();

    menu.style.left = (context.innerWidth - mouse.x < menu.offsetWidth) ?
      context.innerWidth - menu.offsetWidth + "px" : mouse.x + "px";

    menu.style.top = (context.innerHeight - mouse.y < menu.offsetHeight) ?
      context.innerHeight - menu.offsetHeight + "px" :
      mouse.y + "px";
  });
  context.addEventListener('click', () =>
    document.querySelectorAll(".cmenu").forEach(i => i.style.display = "none")
  );
</script>