上下文菜单的定位答案

【问题标题】：Positioning of Context menu上下文菜单的定位
【发布时间】：2011-03-29 08:52:49
【问题描述】：

我在 javascript 中为表格开发了一个右键单击上下文菜单。上下文菜单的位置位于表格每一行的光标下方。表格的最后一行位于页面末尾，现在右键单击行上下文菜单正在下降，但它应该显示在光标上。请提供任何帮助

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

【问题讨论】：

标签： javascript right-click contextmenu

【解决方案1】：

我使用以下函数来设置上下文菜单位置，它适用于我。

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

【讨论】：

像魅力一样工作。

【解决方案2】：

在显示上下文菜单时，您应该检查鼠标光标是在屏幕的下半部分还是上半部分。如果是下半部分，则应将其显示在光标的顶部，反之亦然。这可以也适用于屏幕的右半部分和左半部分，因此您的菜单将根据光标位于屏幕的哪个四分之一出现。如果您这样做，您可以确定无论光标在哪里，您的菜单始终可见。

例如：如果鼠标 x 坐标 > 屏幕高度/2 比在光标上方显示菜单...

【讨论】：