鼠标位置的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/pEFhaLWHt

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>