需要在表格的末尾做一个小三角,当鼠标单机的时候弹出一个菜单列表,鼠标移走时菜单列表隐藏,控制菜单位置的方法为:
event.x
event.y + document.documentElement.scrollTop
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。
要获取当前页面的滚动条纵坐标位置,用:
document.documentElement.scrollTop;
而不是:
document.body.scrollTop;
documentElement 对应的是 html 标签,而 body 对应的是 body 标签。
在标准w3c下,document.body.scrollTop恒为0,需要用document.documentElement.scrollTop来代替;
如果你想定位鼠标相对于页面的绝对位置时,你会发现google里面1000篇文章里面有999.99篇会让你使用event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop,如果你发现你的鼠标定位偏离了你的想象,请不要奇怪,这是再正常不过的事情。
所以有必要的时候可以加如下判断
ie5.5之后已经不支持document.body.scrollX对象了。
所以在编程的时候,请加上这样的判断
if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
top=document.body.scrollTop;
left=document.body.scrollleft;
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)
{
top=document.documentElement.scrollTop;
left=document.documentElement.scrollLeft;
}
我的实现代码如下:
$(".menuImg").click(function(){
var objDiv = $("#mydiv1");
$(objDiv).css("display","block");
// event.clientX
$(objDiv).css("left", event.x);
$(objDiv).css("top", event.y + document.documentElement.scrollTop);
});
些处的菜单用的easyui的easyui-menu
<div id="mydiv1" name="" class="easyui-menu" style="width:20px;position:absolute;display:none;z-index:9999">
<div><a id="rep2" class='menclick' name="日报2" href="#" >门诊日报</a></div>
<div><a id="rep3" class='menclick' name="日报3" href="#" >住院日报</a></div>
<div><a id="rep4" class='menclick' name="日报4" href="#" >综合日报</a></div>
</div>
如图: