右键弹出菜单的定位问题

    现在做的项目中有一个功能是在创建的一个类似word document map的目录上右键时弹出菜单，弹出的菜单正好在鼠标单击事件发生的位置，这就存在了这个菜单的定位问题。

这个功能我首先是从ztree的一个右键功能例子中拷贝过来的，在ztree的例子中运行的好好的，但是粘贴到自己的页面中就怎么定位都不行，研究了很长时间，后来发现这个东西跟我的页面中的父层div的position属性有关，去掉position属性，运行可以成功，但是只要拖动滚动条就又不行了，反复研究最后才研究出问题所在，不禁调侃一句“这些小问题可别想考验强迫人的执着精神”，哈哈~

    右键菜单是一个最初隐藏的，position为absolute的div，通过设置css的top和left属性完成定位，但是有个问题是，它会相对于最近的position为relative的父层div进行定位，若没有的话就相对于body定位了。我的页面中ztree外层有两个position为relative的父层div。最开始我按照ztree例子中那样做的，以event.clientX，event.clientY来设置menu div的left和top值，但是定位有很大的偏差，我尝试删除外层的div去模拟例子中的html格式，最后发现是受外层postion为relative这些div的影响，例子中是没有postion为relative的div的。于是我查资料，了解了相对定位和绝对定位的问题，然后知道menu div是相对于最近的position为relative的div进行定位的，而event.cliextX和event.clientY是相对于文档窗口的位移，那么我需要减去最近menu div最近的position为relative的div相对于文档窗口的位移（使用$("#bodydiv").offset().top和left获得)，确实这样做的确成功了，但是新问题又出现了，那就是拖动滚动条的话定位又偏差了，这时候我有点怀疑event.clentX/Y和jquery的offset到底代表怎样的位移，回头研究例子中的定位，为什么它就不受滚动条的影响，最后才发现它的menu div外层是个iframe，所以它就可以直接使用鼠标事件发生点的位移作为menu div的坐标。最后，我通过$(document).scrollTop()和$(document).scrollLeft()获得滚动条的位移，然后加上这段位移，最后获得了准确定位。没啥困难的，只要你执着研究下去，并能使用灵活的方法！