鼠標位置的Javascript bootstrap打開下拉菜單

Question

我希望我的bootstrap dropdown meny位於鼠標位置。 由於某種原因，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>

腳本

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

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

為了獲得不同分辨率的正確X和Y位置，我需要做什么？

謝謝

Answer 1

似乎事件沒有被調用

這有效：

Bootply ： http ： //www.bootply.com/pEFhaLWTht

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);
});

HTML ：

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