Javascript bootstrap trình đơn thả xuống mở tại vị trí chuột

Question

Tôi muốn trình đơn thả xuống bootstrap của tôi được đặt ở vị trí chuột. Vì lý do nào đó, pageX và pageY là sai. Để sửa vị trí tôi phải cộng hoặc trừ từ x và y. NHƯNG, nếu tôi phóng to hoặc thu nhỏ, X và Y không chính xác nữa. Tôi đã thử mọi thứ ở đó. Đây là một trong số họ ..

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

gì tôi cần phải làm để có được đúng X và vị trí Y với độ phân giải khác nhau ?

Cảm ơn bạn

Answer 1

Nó có vẻ như về sự kiện không được gọi

này hoạt động:

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>