Javascript bootstrap在鼠標位置打開下拉菜單

我希望我的引導程序下拉菜單位於鼠標位置。出於某種原因，pageX和pageY是錯誤的。爲了更正位置，我必須從x和y中加或減。但是，如果我放大或縮小，則X和Y再次不正確。我已經嘗試了一切。這就是其中之一..Javascript bootstrap在鼠標位置打開下拉菜單

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位置不同的分辨率做？

謝謝

來源

2014-10-11 Reft

好像對事件不叫

這工作：

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>

來源

2014-10-11 21:12:50 pbenard

感謝。我發現了另一個問題。我的容器具有margin：auto，它以所有內容爲中心。出於某種原因，這會干擾鼠標位置座標，（在放大時會產生不正確的線和不同的位置）。任何方式繞過這一點，或者我被迫不集中我的內容（哈哈）; D？ – Reft 2014-10-11 21:44:04

好吧我想通了。我有一個父元素有margin：auto，它以整個網站爲中心。我不得不考慮這一點，並將其添加到我的X和Y. 繼承人一個很好的解釋： http://stackoverflow.com/questions/16479179/js-pagex-and-pagey-take-the-coordinate -plus-的餘裕的相對位置-DIV – Reft 2014-10-11 22:00:41

Javascript bootstrap在鼠標位置打開下拉菜單

回答

相關問題