js实现上下文菜单

上下文菜单在web开发中也叫作右键菜单，在web开发中比较常见。如果后台系统用的前端插件，比如easyui等，本身就附带了这种上下文控件，但是如果想要自己实现，该如何做呢？这里我分享一个给各位朋友，先看下最终的整体效果：

这里面有两个要解决的问题：
如何准确的获取鼠标右键点击的位置，并让原本隐藏的菜单在该位置显示出来。
当页面高度很高，以至于在页面最右边出现滚动条的时候也要确保弹出菜单的位置是正确的。
如何解决？
我们来看，如果想要获取鼠标的点击位置，我们可以通过事件的pageX或者clientX，但是这两个用哪一个呢？因为pageX是指文档窗口最左边到鼠标点击位置的距离(pageY同理，是文档窗口最上边到鼠标点击位置的距离),而clientX是可视窗口最左边到鼠标点击位置的距离（clientY同理，是可视窗口最上边到鼠标点击位置的距离）。也就是说pageX的值是包含滚动条滚出的距离的，所以在这里要想确保弹出菜单的位置是正确的，我们要用pageX和pageY。
    2.还有一点要注意，比如我上面的弹出菜单是一个ul，ul本身padding和margin是不为0的，这样子的话，即便你使用了pageX和pageY,上下 文菜单弹出的时候还是和你鼠标点击的位置有一个padding或者margin的偏差，所以还要在ul中设置margin和padding为0。
下面是具体的代码实现部分，为了达到让页面有滚动条的效果，我复制了很多行table的tr标签，所以显得html很长。
html代码：






 
  
          

删除

        
        

修改

        
        

查看详细信息

  
  
      
        日期
        时间
        银行名称
        账号
        出入账名称
        金额
        对方国别
        交易性质名称
      
         
          2016-6-1
          09:30:08
          上海浦东发展银行上海分行
          FTN9884554100002014
          入账
          2,199,975.00
          香港
          一般贸易
         
             
          2016-6-1
          09:30:08
          上海浦东发展银行上海分行
          FTN9884554100002001
          出账
          14,447,235.82
          中国
          货物
         
         
          2016-6-1
          09:28:43
          上海浦东发展银行上海分行
          FTE9799539000001601
          出账
          1,528,818.94
          中国
          因金融衍生工具交易引起的收入/因金融衍生工具交易引起的支出
         
         
          2016-6-1
          09:28:43
          上海浦东发展银行上海分行
          FTE9804545000000114
          出账
          9,770.00
          香港
          一般贸易
         
         
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划
         
          
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划
         
          
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划
         
          
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划
         
          
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划
         
          
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划
          
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划
         
          
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划
          
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划
          
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划
          
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划
         
          
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划
          
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划
         
          
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划
         
          
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划
         
          
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划
         
          
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划
         
          
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划
         
          
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划
         
          
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划
         
          
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划
          
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划
         
          
          2016-6-1
          08:41:22
          上海电气财务公司（上海）
          FTE3105016536000000000501
          入账
          6,200,000.00
          中国
          财务公司集团内部上存/下划