11

我正在尝试使用 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>
4

3 回答 3

8

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

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

CSS：

#box {
    ...
    position: absolute;
}

http://jsfiddle.net/smxLk/

于 2013-04-03T18:44:36.877 回答
8

尝试位置：固定；上下文菜单的位置根据以下条件更改 -

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/zakn7​​Lwb/14/

于 2015-07-11T07:24:05.130 回答
6

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

问题的根源是您在显示元素之前设置了偏移量。display:none如果将元素设置为然后更改其偏移量，它似乎会混淆 jQuery 。

要解决此问题，您需要切换代码中的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();
});

演示
和
来源

于 2013-04-03T18:44:46.223 回答