javascript - 右键单击菜单未显示在正确的位置

Question

我正在尝试为元素列表创建一个编辑和删除选项，当用户右键单击该列表元素时，我已将其显示。

document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
  var x = e.offsetX;
  var y = e.offsetY;
  var d = document.getElementById("context-menu");
  d.style.display = "block";
  d.style.left = x + 'px';
  d.style.top = y + 'px';
  console.log(x, y);
}, false);

#context-menu {
  display: none;
  position: absolute;
  color: blue;
}

.listItems li {
  padding-bottom: 25px;
}

<ul class="listItems">
  <li>I am list one</li>
  <li>I am list two</li>
  <li>I am list three</li>
  <li>I am list four</li>
</ul>

<ul id="context-menu">
  <li> Edit </li>
  <li> Delete </li>
</ul>

jsfiddle 链接是，https://jsfiddle.net/dmfvz5qw/1/

在这里，当我右击时，名为 context-menu 的 id 没有显示在鼠标箭头附近，而是显示在点击列表的更顶部。

我需要在右键单击位置附近而不是任何其他位置显示 context-menu。

请帮我解决这个问题，我也需要 Pure Javascript 的结果。

Answer 1

请改用clientX和clientY:

var x = e.clientX;
var y = e.clientY;