JavaScript bootstrap otwórz menu rozwijane na pozycji myszy

Question

Chcę, aby mój zestaw startowy z listy rozwijanej został umieszczony na pozycji myszy. Z jakiegoś powodu strona pageX i pageY są nieprawidłowe. Aby poprawić pozycję, muszę dodać lub odjąć od x i y. ALE, jeśli powiększę lub pomniejszę, X i Y znowu będą niepoprawne. Próbowałem wszystkiego. Jest to jeden z nich ..

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

Co muszę zrobić, aby uzyskać prawidłową pozycję X i Y o różnych rozdzielczościach ?

Dziękuję

Answer 1

Wydaje się, że na razie nie został powołany

to działa:

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>