Javascript引导在鼠标位置打开下拉菜单

我希望引导下拉菜单位于鼠标位置。由于某种原因，pageX和pageY是错误的。为了修正位置，我必须对x和y进行加或减。但是，如果我放大或缩小，X和Y又是不正确的。我已经尝试了那里的一切。这是其中之一

Html:

<div class="dropdown">
   <div id="menuitems" onclick="setposition(event)" class="dropdown-toggle" data-toggle="dropdown">
   Menu
   </div>

   <ul class="dropdown-menu" id="xxx" role="menu" aria-labelledby="menuitems">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#"</i>Link 1</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#"</i>Link 2</a></li>
   </ul>
</div>

我需要做什么才能在不同分辨率下获得正确的X和Y位置

谢谢你

好像没有打电话给我们

这项工作：

Bootply：

JS：

function setposition(e) {
    var bodyOffsets = document.body.getBoundingClientRect();
    tempX = e.pageX - bodyOffsets.left;
    tempY = e.pageY;
  console.log(tempX);

    $("#xxx").css({ 'top': tempY, 'left': tempX });
}

$('#menuitems').on('click', function(e){
    setposition(e);
});

<div class="dropdown">
   <div id="menuitems" class="dropdown-toggle" data-toggle="dropdown">
   Menu
   </div>

   <ul class="dropdown-menu" id="xxx" role="menu" aria-labelledby="menuitems">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#" <="" i="">Link 1</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#" <="" i="">Link 2</a></li>
   </ul>
</div>

HTML：

function setposition(e) {
    var bodyOffsets = document.body.getBoundingClientRect();
    tempX = e.pageX - bodyOffsets.left;
    tempY = e.pageY;
  console.log(tempX);

    $("#xxx").css({ 'top': tempY, 'left': tempX });
}

$('#menuitems').on('click', function(e){
    setposition(e);
});

<div class="dropdown">
   <div id="menuitems" class="dropdown-toggle" data-toggle="dropdown">
   Menu
   </div>

   <ul class="dropdown-menu" id="xxx" role="menu" aria-labelledby="menuitems">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#" <="" i="">Link 1</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#" <="" i="">Link 2</a></li>
   </ul>
</div>

菜单

谢谢。我发现了另一个问题。我的容器有margin:auto，它集中了所有内容。由于某些原因，这会干扰鼠标位置坐标（缩放时会给出不正确的线和不同的位置）。任何绕过这一点的方法，或者我被迫不以我的内容为中心（lol）；好吧，我知道了。我有一个有空白的父元素：auto，它以整个网站为中心。我必须考虑到这一点，并将其添加到我的X和Y中。以下是一个很好的解释：