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

Javascript bootstrap open dropdown menu at mouse position

本文关键字：下拉菜单 位置 鼠标 引导程序 Javascript      更新时间：2023-09-26

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

感谢

似乎事件上没有调用

这项工作：

引导：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>
相关文章：