首页 > 其他 > 详细

区域性右键弹出菜单随笔

时间:2019-03-05 20:38:57      阅读:195      评论:0      收藏:0      [点我收藏+]

需求: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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!