上下文菜單的定位

我在javascript中爲桌面開發了一個右鍵單擊上下文菜單。上下文菜單的位置在每一行表格的遊標下方。表格的最後一行在頁面的結尾處，現在上右鍵單擊該行的上下文菜單下來，但它應該顯示了cursor.Any幫助，請上下文菜單的定位

function ContextShow(event) { 

event = event || window.event; 

var m = getMousePosition(event); 
var s = getScrollPosition(event); 
var client_height = document.body.clientHeight; 
var display_context = document.getElementById('context_menu'); 

if(replaceContext){ 

     display_context.style.display = "block"; 
     display_context.style.left = m.x + s.x + "px"; 
     display_context.style.top = m.y + s.y + "px"; 

     replaceContext = false; 
    }} 


function getMousePosition (e){ 
e = e || window.event; 
var position = { 
    'x' : e.clientX, 
    'y' : e.clientY 
} 
return position;} 



function getScrollPosition(){ 
var x = 0; 
var y = 0; 

if(typeof(window.pageYOffset) == 'number') { 
    x = window.pageXOffset; 
    y = window.pageYOffset; 
} else if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) { 
    x = document.documentElement.scrollLeft; 
    y = document.documentElement.scrollTop; 
} else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) { 
    x = document.body.scrollLeft; 
    y = document.body.scrollTop; 
} 

var position = { 
    'x' : x, 
    'y' : y 
} 

return position;

}

這裏，contextShow將顯示基於上點右鍵的上下文菜單鼠標位置使用getMousePosition（event）;和getScrollPosition（event）;

來源

2011-03-29 Bhaskar

你能粘貼一些代碼嗎？ – 2011-03-29 08:57:46

當顯示上下文菜單時，您應該檢查鼠標光標是在屏幕的下半部分還是上半部分。如果是下半部分，您應該將其顯示在光標的頂部，反之亦然。可以應用於屏幕的右半部分和左半部分，所以菜單將會出現，取決於你的光標在哪一個屏幕上顯示。如果你這樣做，你確定你的菜單總是可見的，無論你的光標是什麼。

例如：如果鼠標X座標>屏幕高度/ 2比光標的頂部顯示的菜單......

來源

2011-03-29 08:59:45

獲取尺寸的一些幫助：http://www.quirksmode.org/dom/w3c_cssom.html – kapa 2011-03-29 09:05:22

我用下面的函數來設置上下文菜單的位置，以及它爲我工作。

function setContextMenuPostion(event, contextMenu) { 

    var mousePosition = {}; 
    var menuPostion = {}; 
    var menuDimension = {}; 

    menuDimension.x = contextMenu.outerWidth(); 
    menuDimension.y = contextMenu.outerHeight(); 
    mousePosition.x = event.pageX; 
    mousePosition.y = event.pageY; 

    if (mousePosition.x + menuDimension.x > $(window).width() + $(window).scrollLeft()) { 
     menuPostion.x = mousePosition.x - menuDimension.x; 
    } else { 
     menuPostion.x = mousePosition.x; 
    } 

    if (mousePosition.y + menuDimension.y > $(window).height() + $(window).scrollTop()) { 
     menuPostion.y = mousePosition.y - menuDimension.y; 
    } else { 
     menuPostion.y = mousePosition.y; 
    } 

    return menuPostion; 
}

來源

2012-08-03 20:28:54 tooatui

上下文菜單的定位

回答

相關問題