定位上下文菜单(Positioning Context Menu)

我试图定位与jQuery的自定义快捷菜单。
它第一次出现在正确的位置（鼠标坐标），但随后的当前位置被总结了新的位置，从而使菜单从屏幕上消失。
这里是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:

不要使用offset方法，尝试css代替，绝对定位上下文菜单：

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

CSS：

#box {
    ...
    position: absolute;
}

http://jsfiddle.net/smxLk/

Answer 2:

问题是，当你右击，然后左键点击其他地方，然后再次右键单击，位置不正确。

问题的根源在于，设置显示元素之前的偏移。看来，它混淆的jQuery如果元素被设置为display:none ，然后它的偏移量被改变。

要解决你需要切换的问题， show和offset在你的代码行：

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

变

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

演示
和
资源

Answer 3:

尝试位置是：固定; 随着基于以下条件上下文菜单中的位置变化 -

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/

文章来源: Positioning Context Menu