Menu kontekstowe pozycjonowania

Question

Próbuję ustawić niestandardowe menu kontekstowe za pomocą jQuery.
Po raz pierwszy pojawia się we właściwej pozycji (współrzędne myszy), ale wtedy aktualna pozycja jest sumowana z nową pozycją, tak aby menu zniknęło z ekranu.
Oto JavaScript:

<script> 
$(function(){ 
    $('#box').hide(); 

    $(document).bind("contextmenu", function(e) { 
     $("#box").offset({left:e.pageX, top:e.pageY}); 
     $('#box').show(); 
     e.preventDefault(); 
    }); 

    $(document).bind("click", function(e) { 
     $('#box').hide(); 
    }); 
    $('#box').bind("click", function(e) { 
     $('#box').hide(); 
    }); 
}); 
</script> 

Answer 1

Nie używaj offset metody, spróbuj css zamiast, pozycjonowanie menu kontekstowego absolutnie:

$("#box").css({left:e.pageX, top:e.pageY}); 

CSS:

#box { 
    ... 
    position: absolute; 
} 

http://jsfiddle.net/smxLk/

Answer 2

Problem polega na tym, że po kliknięciu prawym przyciskiem myszy kliknij lewym przyciskiem myszy w innym miejscu, a następnie kliknij ponownie prawym przyciskiem, pozycja jest niepoprawna.

Źródłem problemu jest ustawienie przesunięcia przed wyświetleniem elementu. Wygląda na to, że pomylenie jQuery, jeśli element jest ustawiony na display:none, a następnie jego przesunięcie zostanie zmienione.

Aby rozwiązać ten problem, trzeba przełączyć show i offset linie w kodzie:

$(document).bind("contextmenu", function(e) { 
    $("#box").offset({left:e.pageX, top:e.pageY}); 
    $('#box').show(); 
    e.preventDefault(); 
}); 

staje

$(document).bind("contextmenu", function(e) { 
    $('#box').show(); 
    $("#box").offset({left:e.pageX, top:e.pageY}); 
    e.preventDefault(); 
}); 

Demo
i
Source

Answer 3

pozycję Spróbuj: naprawiony; z pozycji menu kontekstowego zmian opartych na następujących warunkach -

var windowHeight = $(window).height()/2; 
var windowWidth = $(window).width()/2; 
if(e.clientY > windowHeight && e.clientX <= windowWidth) { 
    $("#contextMenuContainer").css("left", e.clientX); 
    $("#contextMenuContainer").css("bottom", $(window).height()-e.clientY); 
    $("#contextMenuContainer").css("right", "auto"); 
    $("#contextMenuContainer").css("top", "auto"); 
} else if(e.clientY > windowHeight && e.clientX > windowWidth) { 
    $("#contextMenuContainer").css("right", $(window).width()-e.clientX); 
    $("#contextMenuContainer").css("bottom", $(window).height()-e.clientY); 
    $("#contextMenuContainer").css("left", "auto"); 
    $("#contextMenuContainer").css("top", "auto"); 
} else if(e.clientY <= windowHeight && e.clientX <= windowWidth) { 
    $("#contextMenuContainer").css("left", e.clientX); 
    $("#contextMenuContainer").css("top", e.clientY); 
    $("#contextMenuContainer").css("right", "auto"); 
    $("#contextMenuContainer").css("bottom", "auto"); 
} else { 
    $("#contextMenuContainer").css("right", $(window).width()-e.clientX); 
    $("#contextMenuContainer").css("top", e.clientY); 
    $("#contextMenuContainer").css("left", "auto"); 
    $("#contextMenuContainer").css("bottom", "auto"); 
} 

http://jsfiddle.net/AkshayBandivadekar/zakn7Lwb/14/