Question

我正在尝试实现自定义上下文菜单，这意味着我必须处理容器的边缘（以便菜单不会出现在可见边界之外）。

到目前为止，我的简单概念验证有效，但条件之间存在一些奇怪的相互作用，用于检查菜单是否位于底边之外和右边之外。

 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。我很难过，因为偶尔的坐标控制台记录似乎会产生预期的数字。

Answer 1

我不确定这是否与您在FireFox中的问题有关但在Chrome中遇到两个问题：

一个是文本流，使你的条件错误，因为如果由于文本和填充中断而到达右边缘，context.clientWidth会更改（从52到40）。因此，添加：

white-space: nowrap;

到.menu-item {}

在面对滚动条时，您也会遇到问题。根据我的经验，最好只从页面中间改变侧面而不是最右侧角落。我在这里给你举个例子： http://jsfiddle.net/ncstjbyq/

最右边的特殊行为

1 个答案: