防止对特定项目使用jQuery-contextMenu

编程问答 2022-06-13

问题描述

我正在使用 jQuery-contextMenu 插件创建一个上下文菜单容器class="col-9 context-block"，该容器显示一个菜单，用户可以在其中添加新文件夹或文件。

所有新项目都出现在此容器上方，当用户右键单击文件夹框 div时，我试图阻止默认jQuery-contextMenu 。

我试图阻止使用此代码：

$(document).on("contextmenu",".folder-Box",function(e){
  e.preventDefault();
  $('.context-block').contextMenu(false);
});

$(document).on("contextmenu",".context-block",function(e){
  e.preventDefault();
  $('.context-block').contextMenu(true);
});

但不起作用。

我还想在用户单击 folder-div-option div时显示带有文件夹选项的jQuery-contextmenu，但由于某种原因，它会在默认jQuery-contextMenu 上显示文件夹选项jQuery-contextmenu 。

正在显示此

enter image description here

安装

enter image description here

const array = [
  {
    idpadre: 40,icono: "fa-folder",idCarpeta: 41,nombre: "Cr2",Miembros: ""
  },{
    idCarpeta: 44,nombre: "Carpeta sin titulo",Miembros: "",idpadre: 40,icono: "fa-folder"
  },{
    Miembros: "",nombre: "Carpeta sin titulo2",idCarpeta: 45,{
    icono: "fa-folder",nombre: "Carpeta sin titulo2aaaaaaaaaaaaaaa",idCarpeta: 46,nombre: "Carpeta sin titulo3232",idCarpeta: 47,{
    nombre: "Carpeta sin titulo211111",idCarpeta: 49,idpadre: 40
  },nombre: "Carpeta sin titulo212312",idCarpeta: 50,{
    nombre: "Carpeta sin titulo2222",idCarpeta: 51,nombre: "Crarsa",idCarpeta: 52
  },nombre: "Otra",idCarpeta: 53,{
    idpadre: 40,nombre: "OMG",idCarpeta: 54,idCarpeta: 56
  },idCarpeta: 57,nombre: "ASD",idCarpeta: 61,nombre: "Carpeta sin titulo2"
  },idCarpeta: 62,idCarpeta: 69,nombre: "Alex"
  },idCarpeta: 70,nombre: '"Carpeta sin titulo2"',idCarpeta: 71,nombre: "'Carpeta sin titulo2'",idCarpeta: 72,nombre: "`Carpeta sin titulo`"
  },idCarpeta: 73,Miembros: ""
  }
];

const items_menu_default = {
  "new-folder": {
    name: "Nueva carpeta",icon: "fas fa-folder-plus",callback: function (itemKey,opt,e) {
      if (e.which == 3 || e.which == 2) {
        return false;
      }
    }
  },hr: "---------","upload-files": {
    name: "Subir archivos",icon: "fas fa-file-upload",items: {
      "from-pc": {
        name: "Desde el equipo",icon: "fas fa-desktop",e) {
          if (e.which == 3 || e.which == 2) {
            return false;
          }
        }
      },"from-url": {
        name: "Desde un enlace",icon: "fas fa-link",e) {
          if (e.which == 3 || e.which == 2) {
            return false;
          }
        }
      }
    }
  },"upload-folders": {
    name: "Subir carpetas",e) {
      if (e.which == 3 || e.which == 2) {
        return false;
      }
    }
  }
};
const items_folder_default = {
  "change-name": {
    name: "Cambiar nombre",icon: "far fa-edit",callback: function (item,e) {
      if (e.which == 3 || e.which == 2) {
        return false;
      }

      let id = $(opt.$trigger).attr("class").split(" ")[1];
      change_folder_name(id);
    }
  },"share-with": {
    name: "Compartir",icon: "far fa-share-square","move-to": {
    name: "Mover a",icon: "fas fa-exchange-alt",remove: {
    name: "Quitar",icon: "far fa-trash-alt",e) {
      if (e.which == 3 || e.which == 2) {
        return false;
      }
      let id = $(opt.$trigger).attr("class").split(" ")[1];
      remove_folder(id);
    }
  }
};

$(document).ready(function (e) {
  //Default right click menu
  $.contextMenu({
    selector: ".context-block",className: "sm-context-menu",items: items_menu_default
  });
  //Button menu
  $.contextMenu({
    selector: ".btn-block",trigger: "none",items: items_menu_default
  });
  //Folder option menu
  $.contextMenu({
    selector: '.folder-div-option',className: 'sm-context-menu',trigger: 'left',items: items_folder_default
  });

  array.forEach(function (obj) {
    let id = obj.idCarpeta;
    let name = obj.nombre;
    let icon = obj.icono;
    let short_name = name_length(name);

    $(".lista-carpetas").append(`<div class="folder-Box div-item-folder${id}">
                                  <div class="folder">
                                    <div class="folder-div" title="${name}">
                                      <div class="folder-icon">
                                        <i class="fa ${icon}"></i>
                                      </div>
                                      <div class="folder-name">${short_name}</div>
                                    </div>
                                    <div class="folder-div-option ${id}" title="Option">
                                      <i class="fas fa-ellipsis-v"></i>
                                    </div>
                                  </div>
                                </div>`);
  });
});

/*Prevent default right click*/
$(document).on("contextmenu",".container-fluid",function (e) {
  e.preventDefault();
});

/*Prevent right click jquery-contextmenu on .folder-Box*/
$(document).on("contextmenu",function(e){
  e.preventDefault();
  //$trigger.contextMenu(false);
});

$(document).on("click","button.btn",function (e) {
  $(".btn-block").contextMenu();
});

function name_length(name){
  if(name.length > 21){
    return name.substring(0,21)+"...";
  }else{
    return name;
  }
}
.container-fluid {
  min-height: 400px;
}

.folder-Box{
    float:left;
    width:220px;
}

.folder{
  border: 1px solid #e7eaec;
  padding: 0;
  background-color: #ffffff;
  position: relative;
  border-radius: 5px;
  margin-bottom: 10px;
  margin-right: 10px;
  height: 40px;
  user-select: none;
}

.folder .folder-div{
    width:182px; 
    display:inline-block; 
    cursor:pointer;
  }
  .folder-div:hover,.folder-div-option:hover{
    background-color: #f5f5f5;
  }
  .folder .folder-div .folder-icon{
    display:inline;
  }
  .folder .folder-div .folder-icon i{
    font-size:15px;
    color:#3d4d5d;
    padding:12px 10px;
  }
  .folder .folder-div .folder-name{
    display:inline; 
  }
  .folder .folder-div-option i{
    font-size:15px;
  }
  .folder .folder-div-option{
    display:inline;
    float:right;
    padding:8px 10px;
    cursor:pointer;
    width:25.65px;
  }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js"></script>




<div class="row container-fluid">
  <div class="col-3">
    <button class="btn btn-primary btn-block">Nuevo</button>
  </div>

  <div class="col-9 context-block">
    <div class="row">
      <div class="col-12 lista-carpetas"></div>
      <div class="col-12 lista-ficheros"></div>
    </div>
  </div>
</div>

更新：

在e.preventDefault();中将return false更改为$(document).on("contextmenu",function(e){});。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

contextmenucontextmenujavascriptjquery