我正在尝试实现自定义上下文菜单，这意味着我必须照顾容器的边缘（这样菜单就不会出现在可见边界之外）。
到目前为止，我的简单概念验证仍然有效，但条件之间存在一些奇怪的交互，用于检查菜单是否位于底部边缘之外和右侧边缘之外。
if((context.clientHeight + e.pageY) > (body.clientHeight)){
context.style.top = (e.pageY - context.clientHeight) + "px";
}
if((context.clientWidth + e.pageX) > (body.clientWidth)){
context.style.left = (e.pageX - context.clientWidth) + "px";
}
这些条件条件中的每一个都会精确地产生预期的行为，除了检查右边界的情况有16个像素左右，我无法解释。但是，真正奇怪的是，当我将两个条件都保留在那里时，在最右端和下角都有一个正方形区域，无论单击鼠标到边缘的距离如何，该区域都会使上下文菜单始终显示在其外部。就好像在两种情况下一样，菜单都拒绝出现在该方框内，即使很高兴仅在两种情况之一下也如此。
这是fiddle。我为此感到困惑，因为偶尔的控制台控制台记录坐标似乎会产生预期的数字。
最佳答案
我不确定这是否与您在FireFox中的问题有关，但是在Chrome中您会遇到两个问题：
一种是使您的条件错误的文本流，因为如果由于文本和填充中断而到达右侧，则context.clientWidth将从52更改为40。
因此添加：
white-space: nowrap;
到.menu-item {}
另外，面对滚动条时，您也会遇到问题。以我的经验，最好只改变侧面而不是页面中间的最右角。
我在这里为您提供了一个示例：
http://jsfiddle.net/ncstjbyq/