点击任意处div隐藏

image.png

点击图标操作框出现，然后点击任意处操作框消失

 <!--html(简要写一下):-->
<li v-for="">
  <icon @clcik="onclick"></icon>
</li>
<div id="rMenu" class="rMenu" style="width: 120px;height: 110px;font-size: 12px;" >
  <ul>
      <li id="m_add" >
         <!--跳到新建私海页面-->
         <a href="">新建私海</a>
      </li>
      <li id="m_rename" @click="editAlbumName()">
         <a href="javascript:;">修改私海</a>
       </li>
       <li id="m_del" @click="removeTreeNode()">
          <a href="javascript:;">删除私海</a>
       </li>
  </ul>
</div>
// 点击事件
onclick(){
   // 获取鼠标点击位置(只有一个时直接定位就好，我这里是在多个上面点击出现)
    var x = event.clientX;
    var y = event.clientY;
   // 判断条件根据实际返回的值自定义
   // 如果在父节点点击传root，操作只有新建
   // 如果在子节点点击传node，操作有新建、修改、删除（此处根据需求做判断 如父节点不给操作就直接return）
   if (treeNode.parentId) {
      this.showRMenu("root", x, y);
   } else {
       this.showRMenu("node", x, y);
   }
},
// 显示操作目录框
showRMenu(type, x, y) {
   // type 判断是在子节点还是在父节点（根据需求调整，不需要可联系上面的方法去掉参数type）
   let rMenu = $("#rMenu");
   $("#rMenu ul").show();
    if (type=="root") {
       $("#m_del").hide();
       $("#m_rename").hide();
    } else {
       $("#m_del").show();
       $("#m_rename").show().nextSibling;
       $("#m_add").show();
    }
    // 给操作框设置定位 跟随鼠标点击位置
    rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});
    // 给body绑定事件 左击任意处操作框消失
    $("body").bind("mousedown", this.onBodyMouseDown);
},
// 隐藏操作目录框
hideRMenu() {
    let rMenu = $("#rMenu");
    if (rMenu) rMenu.css({"visibility": "hidden"});
     // 给body解绑事件 不影响其他点击事件的操作
     jQuery("body").unbind("mousedown", this.onBodyMouseDown);
 },
 onBodyMouseDown(event) {
     let rMenu = $("#rMenu");
     if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
         rMenu.css({"visibility" : "hidden"});
     }
 }