右击菜单显示位置不正确

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/

在这里，当我右键单击时，名为id的context-menu不在鼠标箭头附近显示，它显示在单击列表的更多顶部。

我需要显示context-menu附近的点击位置，而不是任何其他位置。

请帮助我解决这个问题，我也需要结果在纯Javascript。

Answer 1

你需要在这里使用clientX和clientY

如果您也想了解有关使用体滚动位置定位的更多信息，请参考以下链接https://stackoverflow.com/a/7790764/2630817

​

 document.addEventListener('contextmenu', function(e) {
	e.preventDefault();
 document.getElementById("context-menu").display = 'none';     
 var x = e.clientX ;
 var y = e.clientY;
 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;
  padding: 0;
  width:50px;
}

<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>

​

Answer 2

请改用clientX和clientY：

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