Positionierung Kontextmenü

Ich versuche, die position, die ein eigenes Kontext-Menü mit jQuery.

Das erste mal wird er an der richtigen position (Maus-Koordinaten), aber dann wird die aktuelle position wird summiert, mit der neuen position, so dass das Menü verschwindet vom Bildschirm.

Hier ist das 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>

Durch die Art und Weise, .on() hat verdrängt .bind() in neueren Versionen von jQuery.

InformationsquelleAutor user1170330 | 2013-04-03

9

Nicht verwenden offset Methode versuchen css statt, Positionierung Kontextmenü absolut:
```
$("#box").css({left:e.pageX, top:e.pageY});
```
CSS:
```
#box {
    ...
    position: absolute;
}
```
http://jsfiddle.net/smxLk/
- Eigentlich mag ich diese besser in jedem Fall. Richtig verstehen, das CSS und die Einstellung entsprechend wird immer besser sein als die Verwendung von jQuery in meine Meinung, aber ich würde eine emendation. Ich würde fixed statt absolute. auf diese Weise kann nicht beeinflusst werden durch eine nicht-statische Eltern und es spielt keine Scrollleisten.
- Mit position: fixed macht Kontextmenü Verhalten sich seltsam :jsfiddle.net/smxLk/1 auf der Seite mit der langen Seite Inhalt. position:absolute gut funktioniert: jsfiddle.net/smxLk/2. Ich denke auch, dass, bevor Sie sehen, wir haben zu prüfen, ob Menü erlischt der Bildschirm und fix seine position acordingly anderes Menü macht keinen Sinn, wenn es abgeschnitten.
- Gute Punkte. Ich vergaß, es würde an einem spot bleiben beim scrollen position:fixed. XD
InformationsquelleAutor dfsq
5

Das problem ist, dass wenn Sie klicken Sie mit der linken Maustaste an anderer Stelle und dann mit der rechten klicken Sie erneut, die position ist falsch.

Die Wurzel des Problems ist, dass Sie den offset vor dem anzeigen der element. Es scheint, dass es verwirrt jQuery, wenn das element festgelegt ist display:none und dann den offset geändert wird.

Problem zu beheben, müssen Sie schalten Sie die show und die offset Zeilen in Ihrem code:
```
$(document).bind("contextmenu", function(e) {
    $("#box").offset({left:e.pageX, top:e.pageY});
    $('#box').show();
    e.preventDefault();
});
```
wird
```
$(document).bind("contextmenu", function(e) {
    $('#box').show();
    $("#box").offset({left:e.pageX, top:e.pageY});
    e.preventDefault();
});
```
Demo
und

Quelle
- Ist das ein bug im jQuery dann?
- Vielleicht. Ich bin nicht sicher, es wäre behoben, jedoch, weil es nicht wirklich Sinn zu ändern, der Versatz von ein hidden-element. Aber ich habe nicht eine definitive Antwort für dich, leider
InformationsquelleAutor Joseph Marikle

Versuchen, die position: fixed; mit position des Kontext-Menü-änderungen auf der Grundlage der nachfolgenden Zustand -

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