jQuery自定义右键菜单

首先看下效果，效果在最下面：

代码：

 body {
     font-size: 12px;
     margin: 0px;
     padding: 0px;
 }
 form,div,ul,li {
     margin: 0px;
     padding: 0px;
     list-style-type: none;
     overflow: hidden;
 }
 h1,h2,h3,h4,h5 {
     font-size: 12px;
     margin: 0px;
     padding: 0px;
 }
 a {
     text-decoration: none;
 }

 .layout {
     width: 993px;
     clear: both;
     margin-right: auto;
     margin-left: auto;
     border-top-width: 0px;
     border-right-width: 4px;
     border-bottom-width: 0px;
     border-left-width: 4px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #000000;
     border-right-color: #000000;
     border-bottom-color: #000000;
     border-left-color: #000000;
     overflow: hidden;
 }
 .layout2 {
     width: 942px;
     margin-right: auto;
     margin-left: auto;
 }

 .Content {
     background-color: #376285;
 }

 .contentBg {
     background-color: #173043;
 }
 div, ul, li {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
 }

 body {
  background-color: #FFFFFF;
  font-size: 12px;
  margin: 0px;
  padding: 0px;
 }

 #TreeList {
  background-color: #FFFFFF;
  margin-top: 6px;
  margin-right: 9px;
  margin-bottom: 6px;
  margin-left: 9px;
  border: 1px solid #5d7b96;
  padding-bottom: 6px;
  padding-left: 6px;
 }
 #TreeList .mouseOver {
  background-color: #FAF3E2;
 }

 #TreeList .ParentNode {
  line-height: 21px;
  height: 21px;
  margin-top: 2px;
  clear: both;
 }

 #TreeList .ChildNode {
  background-image: url(/jscss/demoimg/201205/Sys_ModuleIcos.png);
  background-position: 15px -58px;
  padding-left: 39px;
  line-height: 21px;
  background-repeat: no-repeat;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  border-left-width: 0px;
  border-top-style: dashed;
  border-right-style: dashed;
  border-bottom-style: dashed;
  border-left-style: dashed;
  border-top-color: #aabdce;
  border-right-color: #aabdce;
  border-bottom-color: #aabdce;
  border-left-color: #aabdce;
  cursor: default;
  clear: both;
  height: 21px;
  color: #314f6a;
 }

 #TreeList .title {
  float: left;
 }
 #TreeList .input {
  font-size: 12px;
  line-height: 18px;
  color: #FFF;
  height: 16px;
  background-color: #3F6B8F;
  width: 120px;
  text-align: center;
  margin-top: 1px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #1F3547;
  border-right-color: #FFF;
  border-bottom-color: #FFF;
  border-left-color: #1F3547;
  float: left;
 }
 #TreeList .editBT {
  float: left;
  overflow: visible;
 }
 #TreeList .editBT .ok {
  background-image: url(/jscss/demoimg/201205/Sys_ModuleIcos.png);
  background-repeat: no-repeat;
  background-position: 0px -89px;
  height: 13px;
  width: 12px;
  float: left;
  margin-left: 3px;
  padding: 0px;
  margin-top: 3px;
  cursor: pointer;
 }
 #TreeList .editBT .cannel {
  background-image: url(/jscss/demoimg/201205/Sys_ModuleIcos.png);
  background-repeat: no-repeat;
  background-position: 0px -120px;
  float: left;
  height: 13px;
  width: 12px;
  margin-left: 3px;
  padding: 0px;
  margin-top: 3px;
  cursor: pointer;
 }

 #TreeList .editArea {
  float: right;
  color: #C3C3C3;
  cursor: pointer;
  margin-right: 6px;
 }

 #TreeList .editArea span {
  margin: 2px;
 }

 #TreeList .editArea .mouseOver {
  color: #BD4B00;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #C9925A;
  border-right-color: #E6CFBB;
  border-bottom-color: #E6CFBB;
  border-left-color: #C9925A;
  background-color: #FFFFFF;
  margin: 0px;
  padding: 1px;
 }

 #TreeList .ParentNode .title {
  color: #314f6a;
  cursor: pointer;
  background-image: url(/jscss/demoimg/201205/Sys_ModuleIcos.png);
  background-repeat: no-repeat;
  padding-left: 39px;
 }

 #TreeList .ParentNode.show .title {
  font-weight: bold;
  background-position: 3px -27px;
 }

 #TreeList .ParentNode.hidden .title {
  background-position: 3px 4px;
 }

 #TreeList .ParentNode .editArea {
  color: #999;
 }
 #TreeList .ParentNode.show {
  background-color: #d1dfeb;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #5d7b96;
  border-right-color: #5d7b96;
  border-bottom-color: #5d7b96;
  border-left-color: #5d7b96;
 }

 #TreeList .ParentNode.hidden {
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  border-left-width: 0px;
  border-top-style: dashed;
  border-right-style: dashed;
  border-bottom-style: dashed;
  border-left-style: dashed;
  border-top-color: #aabdce;
  border-right-color: #aabdce;
  border-bottom-color: #aabdce;
  border-left-color: #aabdce;
 }

 #TreeList .Row {
  clear: both;
  margin-left: 24px;
  background-image: url(/jscss/demoimg/201205/Sys_ModuleIcos2.png);
  background-repeat: repeat-y;
  background-position: 7px 0px;
 }

 h1 {
  font-size: 12px;
  line-height: 24px;
  color: #FFF;
  background-color: #396384;
  text-align: center;
  margin: 0px;
  padding: 0px;
 }

 #OpLimits_Menu {
  position: absolute;
  width: 70px;
  cursor: default;
  filter: Alpha(Opacity=90);
 }

 #OpLimits_Menu ul {
  background-color: #d5effc;
  border: 1px solid #3e8dad;
 }
 #OpLimits_Menu ul li {
  line-height: 18px;
  color: #496D81;
  text-align: center;
  letter-spacing: 0.3em;
  height: 18px;
  cursor: pointer;
 }
 #OpLimits_Menu ul .onmouse {
  background-image: url(/jscss/demoimg/201205/bt1.gif);
  background-repeat: repeat-x;
  color: #324A58;
 }

<div id="TreeList">
   <div class="ParentNode show">
      <div class="title">title</div>
    </div>
    <div class="Row">
      <div class="ChildNode">
        <div class="title">这是一个li</div>
      </div>
      <div class="ChildNode">
        <div class="title">这是一个li</div>
      </div>
      <div class="ChildNode">
        <div class="title">这是一个li</div>
      </div>
      <div class="ChildNode">
        <div class="title">这是一个li</div>
      </div>
      <div class="ChildNode">
        <div class="title">这是一个li</div>
      </div>
    </div>
</div>

<div id="OpLimits_Menu" style="display:none">
 <h1>权限设置</h1>
    <ul>
      <li value="1">查看</li>
      <li value="2">添加</li>
      <li value="3">修改</li>
      <li value="4">删除</li>
    </ul>
</div>

js:

     $(function(){
   /*首先禁用需要操作区域的右键功能*/
     $("#TreeList").on("contextmenu", function (e) {
         var pointX = e.pageX;
         //这里可以得到鼠标Y坐标
         var pointY = e.pageY;
         var $div = $("div#OpLimits_Menu"); // 右击自定义div
         $div.show().css({ "left": pointX, "top": pointY });
         return false;
     })
     /*鼠标右键事件判定 e.which 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键*/
     var $child = $("#TreeList").find("div.ChildNode");
     $(document).on("mousedown", function (e) {

         var $div = $("div#OpLimits_Menu"); // 右击自定义div
         if (e.which != 3) {  // 判断是右击事件执行if里面的操作
             $div.hide()//
         }
     })

这就是最终的效果：

title

这是一个li

这是一个li

这是一个li

这是一个li

这是一个li

权限设置

• 查看
• 添加
• 修改
• 删除