javascript 定位上下文菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15795253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Positioning Context Menu
提问by user1170330
I'm trying to position a custom context menu with jQuery.
The first time it appears at the right position (mouse coordinates), but then the current position is being summed up with the new position, so that the menu disappears from the screen.
Here is the JavaScript:
我正在尝试使用 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>
采纳答案by dfsq
Don't use offsetmethod, try cssinstead, positioning context menu absolutely:
不要使用offset方法，css而是尝试，绝对定位上下文菜单：
$("#box").css({left:e.pageX, top:e.pageY});
CSS:
CSS：
#box {
...
position: absolute;
}
回答by Joseph Marikle
The problem is that when you right click then left click elsewhere and then right click again, the position is incorrect.
问题是当你右键单击然后左键单击其他地方然后再次右键单击时，位置不正确。
The root of the problem is that you set the offset before showing the element. It appears that it confuses jQuery if the element is set to display:noneand then its offset is changed.
问题的根源在于您在显示元素之前设置了偏移量。如果将元素设置为display:none然后更改其偏移量，它似乎会混淆 jQuery 。
To fix the problem you need to switch the showand the offsetlines in your code:
要解决此问题，您需要切换代码中的show和offset行：
$(document).bind("contextmenu", function(e) {
$("#box").offset({left:e.pageX, top:e.pageY});
$('#box').show();
e.preventDefault();
});
becomes
变成
$(document).bind("contextmenu", function(e) {
$('#box').show();
$("#box").offset({left:e.pageX, top:e.pageY});
e.preventDefault();
});
回答by AkshayBandivadekar
Try position: fixed; with position of context menu changes based on following condition -
试用位置：固定；根据以下条件更改上下文菜单的位置 -
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");
}
