我正在尝试使用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>
答案 0 :(得分:9)
请勿使用offset
方法,请尝试使用css
,绝对定位上下文菜单:
$("#box").css({left:e.pageX, top:e.pageY});
CSS:
#box {
...
position: absolute;
}
答案 1 :(得分:4)
问题在于,当您右键单击然后左键单击其他位置然后再次右键单击时,位置不正确。
问题的根源是您在显示元素之前设置偏移量。如果元素设置为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();
});
答案 2 :(得分: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");
}