menu di avvio a discesa di avvio JavaScript nella posizione del mouse

Question

Voglio che il mio dropdown di bootstrap sia posizionato nella posizione del mouse. Per qualche ragione la pagina X e la pagina Y sono sbagliate. Per correggere la posizione devo aggiungere o sottrarre da xe y. MA, se poi eseguo lo zoom avanti o indietro, X e Y sono di nuovo errati. Ho provato tutto là fuori. Questo è uno di loro ..

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

Cosa devo fare per ottenere corretta posizione X e Y con diverse risoluzioni ?

Grazie

Answer 1

Sembra che il caso non è stato chiamato

Questo funziona:

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>