Javascript 防止菜单显示在窗口外_Javascript_Jquery_Html_Css

Javascript 防止菜单显示在窗口外

javascript jquery html css

Javascript 防止菜单显示在窗口外,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在php文件列表应用程序中使用ul作为上下文菜单我最近添加了这段代码，以便在光标离窗口边界太近时移动菜单，以防止菜单部分绘制在窗口外部 if ((PosY + elm.outerHeight()) > $(window).height()) { PosY = PosY - elm.outerHeight(); } if ((PosX + elm.outerWidth()) > $(window).width()) { PosX = PosX - elm.outerWidt

我在php文件列表应用程序中使用ul作为上下文菜单

我最近添加了这段代码，以便在光标离窗口边界太近时移动菜单，以防止菜单部分绘制在窗口外部

if ((PosY + elm.outerHeight()) > $(window).height()) {
  PosY = PosY - elm.outerHeight();
}
if ((PosX + elm.outerWidth()) > $(window).width()) {
  PosX = PosX - elm.outerWidth();
}

但是… 有时代码会起作用，菜单会被移动，有时不起作用，菜单显示如下：比如说，它的工作效率不是五分之一

我试图安慰这些变量，但它们似乎是正确的，我真的不明白为什么会发生这种情况

这里是一个工作片段，我设法重现了这个问题。由于它是我代码的一个摘录，很多CSS都丢失了，但这并不重要

//全局变量 var-PosX=0； var-PosY=0； //鼠蜕皮 $document.mousemovefunction{ PosX=e.pageX； PosY=e.pageY；回来 }; /* 上下文菜单 */ //将要显示contexmenu时触发操作 $document.oncontextmenu，functionevent{ //避免常规的违约事件； }; //如果在某个地方单击了文档 $document.onmousedown，functione{ //如果单击的元素不是菜单如果$e.target.parents.ContextMenu.length==0{ //藏起来 $.ContextMenu.fadeOut100； } }; //在关联菜单上… 函数ContextMenuid{ elm=$+id； /* 控制台。logPosY:，PosY； console.logelm H:，elm.outerHeight； console.logwin H:，$window.height； console.logPosX:，PosX； console.logelm W:，elm.outerWidth； console.logwin W:，$window.width； */ //在屏幕外移动菜单如果PosY+elm.outerHeight>$window.height{ PosY=PosY-elm.outerHeight； } 如果PosX+elm.outerWidth>$window.width{ PosX=PosX-elm.outerWidth； } //隐藏并重新打开所需的菜单 elm.fadeout 100，函数{ elm.css{ 上图：波西，左：PosX }.fadeIn200； }; //控制台上的console.log上下文菜单：+elm；返回false； } @字符集UTF-8； * { 保证金：0；填充：0； } 身体{ 字体大小：16px；位置：固定；颜色：000； } P 输入标签按钮 a{ 字体系列：源Sans Pro、Trebuchet MS、Helvetica、Sans serif；显示：内联块；游标：继承； } 无形的{ 表布局：固定；宽度：100%；边界：0；边界塌陷：塌陷；边缘底部：800px； } /*滚动条*/ 表：：-webkit滚动条轨迹条{ 背景色：DDD； } 表：：-webkit滚动条拇指{ 背景色：000； } thead th{ 填充：4px0； } 泰阿德一世{ 左边距：4倍；字体大小：14px！重要；颜色：CCC； } 西亚斯， tbody tr{ 光标：指针； } tbody td{ 垂直对齐：中间对齐； } t车身td：第一种类型{ 保证金：0自动； /*溢出：隐藏*/ } tbody td img{ 垂直对齐：中间对齐；高度：32px； } tbody tr:nth of typeodd td{ 背景色：EEEE； } tbody tr:typeeven td的第n个{ 背景色：DDDD； } 表th，表td{ 位置：相对位置； } 表p{ 左侧填充：4px； } .上下文菜单{ 位置：固定；显示：无；背景：F8；边框：2个实心888； z指数：2；颜色：333； /*光滑的颜色*/ } .ContextMenu div{ 背景：e8e8e8；高度：16px；填充：4px；边框底部：1px实心CCC； } .ContextMenu div:非：第一个孩子{ 边框顶部：2个实心AAA； } 李先生{ 显示：块；高度：20px；填充：6px 24px 6px 8px；光标：指针；列表样式类型：无；过渡：全部。3秒轻松；空白：nowrap； } .ContextMenu img， .ContextMenu i， .ContextMenu span， .上下文菜单{ 显示：内联块；高度：20px；垂直对齐：中间对齐； } .ContextMenu img， .ContextMenu i， .上下文菜单范围{ 宽度：20px；文本对齐：居中；右边距：8px； } 图标

文件名

类型

。[当前]

当前目录

工具

创建新文件夹

创建新文件

上载当前文件夹中的文件

以Zip格式下载当前文件夹

访问

工具

改名

移动

抄袭

删除

以Zip格式下载文件夹

我相信问题就在这里。淡出100和。淡出200。这些是动画，因此，它们与代码的其余部分异步运行

老实说，我没有资格为您提供一个关于为什么以及如何在您的代码中发生这种情况的全面解释。基本上：更新posX和posY的过程以及隐藏和显示菜单的过程是重叠的。请注意，按原样编写代码时，如果在每次单击之间花费约1秒的时间，则问题永远不会发生，而如果开始反复单击，则问题会越来越频繁，这只是另一个提示，说明动画的时间是问题的根源

解决方案：将更新posX和posY放在隐藏和显示菜单中。特别是在隐藏菜单之后，在再次显示它之前，在回调内部

如果小妖精再次出现，请告诉我

//全局变量 var-PosX=0； var-PosY=0； //鼠蜕皮 $document.mousemovefunction{ PosX=e.pageX； PosY=e.pageY；回来 }; /* 上下文菜单 */ //将要显示contexmenu时触发操作 $document.bindcontextmenu，functionevent{ //避免常规的违约事件； }; //如果在某个地方单击了文档 $document.bindmousedown，函数E{ //如果单击的元素不是菜单如果$e.target.parents.ContextMenu.length==0{ //藏起来 $.ContextMenu.fadeOut100； } }; //在关联菜单上… 函数ContextMenuid{ elm=$+id； /* 控制台。logPosY:，PosY； console.logelm H:，elm.outerHeight； console.logwin H:，$window.height； console.logPosX:，PosX； console.logelm W:，elm.outerWidth； console.logwin W:，$window.width； */ //隐藏并重新打开所需的菜单 elm.fadeout 100，函数{ //在屏幕外移动菜单如果PosY+elm.outerHeight>$window.height{ PosY=PosY-elm.outerHeight； } 如果PosX+elm.outerWidth>$window.width{ PosX=PosX-elm.outerWidth； } elm.css{ 上图：波西，左：PosX }.fadeIn200； }; 返回false； } @字符集UTF-8； * { 保证金：0；填充：0； } 身体{ 字体大小：16px；位置：固定；颜色：000； } P 输入标签按钮 a{ 字体系列：源Sans Pro、Trebuchet MS、Helvetica、Sans serif；显示：内联块；游标：继承； } 无形的{ 表布局：固定；宽度：100%；边界：0；边界塌陷：塌陷；边缘底部：800px； } /*滚动条*/ 表：：-webkit滚动条轨迹条{ 背景色：DDD； } 表：：-webkit滚动条拇指{ 背景色：000； } thead th{ 填充：4px0； } 泰阿德一世{ 左边距：4倍；字体大小：14px！重要；颜色：CCC； } 西亚斯， tbody tr{ 光标：指针； } tbody td{ 垂直对齐：中间对齐； } t车身td：第一种类型{ 保证金：0自动； /*溢出：隐藏*/ } tbody td img{ 垂直对齐：中间对齐；高度：32px； } tbody tr:nth of typeodd td{ 背景色：EEEE； } tbody tr:typeeven td的第n个{ 背景色：DDDD； } 表th，表td{ 位置：相对位置； } 表p{ 左侧填充：4px； } .上下文菜单{ 位置：固定；显示：无；背景：F8；边框：2个实心888； z指数：2；颜色：333； /*光滑的颜色*/ } .ContextMenu div{ 背景：e8e8e8；高度：16px；填充：4px；边框底部：1px实心CCC； } .ContextMenu div:非：第一个孩子{ 边框顶部：2个实心AAA； } 李先生{ 显示：块；高度：20px；填充：6px 24px 6px 8px；光标：指针；列表样式类型：无；过渡：全部。3秒轻松；空白：nowrap； } .ContextMenu img， .ContextMenu i， .ContextMenu span， .上下文菜单{ 显示：内联块；高度：20px；垂直对齐：中间对齐； } .ContextMenu img， .ContextMenu i， .上下文菜单范围{ 宽度：20px；文本对齐：居中；右边距：8px； } 图标

文件名

类型