jquery 定位上下文菜单

h9a6wy2h  于 2023-06-22  发布在  jQuery
关注(0)|答案(4)|浏览(120)

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

jmo0nnb31#

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

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/

cunj1qz1

cunj1qz12#

不要使用offset方法,尝试使用css,绝对定位上下文菜单:

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

CSS:

#box {
    ...
    position: absolute;
}

http://jsfiddle.net/smxLk/

jum4pzuy

jum4pzuy3#

问题是,当你右键单击然后左键单击其他地方,然后再次右键单击,位置是不正确的。
问题的根源在于您在显示元素之前设置了偏移。如果元素被设置为display:none,然后它的偏移量被改变,这似乎会混淆jQuery。
要解决这个问题,你需要在代码中切换showoffset行:

$(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();
});

Demo
和/或
Source

cgyqldqp

cgyqldqp4#

我用jquery写了这段代码来定位我的contextmenu

$('body').contextmenu(function (e){
    e.preventDefault();
    let locationX = e.clientX;
    let locationY = e.clientY;
    let ContextWidth = $('#context').width();
    let ContextHeight = $('#context').height();
    let windowWidth = $(window).outerWidth();
    let windowHeight = $(window).outerHeight();

    if (locationY + ContextHeight > windowHeight){
        locationY -= ContextHeight;
    }
    if (locationX + ContextWidth > windowWidth){
        locationX -= ContextWidth;
    };

    $('#context').fadeIn().css({'left': locationX + 'px', 'top': locationY + 'px'});
});

如果你想使用这个,你需要写这个css #context {position:固定;左:0; top:0; display:无;}

相关问题