区域性右键弹出菜单随笔

需求：div整体右键弹出一个菜单，然后div上不同组件右键弹出不同菜单，如图：

树根节点右键的菜单：

 

除树根以外的其他树节点右键的菜单：

table部分右键时的菜单：

其他地方右键的菜单：

主题思路：右键时对于不同元素进行判断，然后进行li隐藏/显现和label修改的操作，左键单击隐藏菜单

关键代码：

 

   /*显示菜单*/

    showMenu(data, node) {

      var evt = window.event || arguments[0];

      var left = document.getElementById("left");

      var menu = document.getElementById("menu");

      menu.style.top = evt.pageY - 60 + "px";

      menu.style.left = evt.pageX - 200 + "px";

      /*设置菜单可见*/

      if (node != undefined) {

        //node不为undefind说明右键的元素为菜单元素或者table

        if (node.label == "树根") {//右键的是树根节点

          $("#addItems")[0].innerHTML = "添加一级节点 / 分支机构";//修改label

          $("#delete").hide();//隐藏删除的li

        } else {

          //为table右键或者树根的子节点（包括孙子节点，即叶子节点）

          node.cancelBubble = true;//取消事件冒泡

          if (node.label == null) {//表示右键的是table，只有table右键有preventDefault方法，树列表没有

            node.preventDefault();

          }

          $("#addItems")[0].innerHTML = "添加子级节点 / 部门";

          $("#delete").show();

        }

      } else {

        $("#addItems")[0].innerHTML = "添加一级节点 / 分支机构";

        $("#delete").hide();

      }

      menu.style.visibility = "visible";

    },

    //鼠标左击使得右击的菜单消失

    mainClick() {

      var menu = document.getElementById("menu");

      menu.style.visibility = "hidden";

    },

 

 注意事项：在table处添加右键事件时要阻止事件冒泡，否则会触发父组件的右键事件（即包含它的父组件的@contextmenu事件），同时也早阻止默认事件（使用preventDefault方法），但是树列表貌似没有preventDefault方法，所以在使用preventDefault方法时要将其排除

 

 

转载于:https://www.cnblogs.com/MrZWJ/p/10479106.html