Question

我希望我的引导下拉菜单位于鼠标位置。由于某种原因，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>

鼠标位置的Javascript bootstrap打开下拉菜单

1 个答案: