Открывающееся раскрывающееся меню Javascript-бутстрапа в позиции мыши

Question

Я хочу, чтобы мой загрузочный диск для начальной загрузки был расположен в позиции мыши. По какой-то причине страницыX и 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> 

Script

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>