Positionierung des Kontextmenüs

Question

Ich habe ein Rechtsklick-Kontextmenü in Javascript für Tabelle entwickelt. die Position des Kontextmenüs ist an der Unterseite des Cursors für jede Zeile der Tabelle. die letzte Zeile der Tabelle ist am Ende der Seite, jetzt auf der rechten Seite klicken Sie auf die Zeile das Kontextmenü kommt nach unten, aber es sollte bis der Cursor angezeigt werden. jede Hilfe bitte

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;

}

Hier zeigt die ContextShow das Kontextmenü des Rechtsklicks an, basierend auf der Mausposition mit getMousePosition(event); und getScrollPosition(event);

Answer 1

Ich verwende die folgende Funktion, um die Position des Kontextmenüs festzulegen, und sie funktioniert bei mir.

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

Answer 2

Bei der Anzeige des Kontextmenüs sollten Sie prüfen, ob sich der Mauszeiger in der unteren oder der oberen Hälfte des Bildschirms befindet, und wenn er sich in der unteren Hälfte befindet, sollten Sie das Menü über dem Mauszeiger anzeigen und umgekehrt.Dies kann auch für die rechte und linke Hälfte des Bildschirms gelten, so dass das Menü je nach dem Viertel des Bildschirms, in dem sich der Mauszeiger befindet, angezeigt wird.

Z.B.: wenn Maus x-Koordinaten > Bildschirmhöhe/2, dann wird das Menü über dem Cursor angezeigt...