I am creating a contextmenu container with the jQuery-contextMenu plugin to add content (files, folders). The content is rendered on top of the container.
I'm trying to prevent right click on containers .folder-boxbut I can't do it. I have tried to prevent it by:
$(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);
});
But it works.
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,
idPadre: 40,
icono: "fa-folder"
},
{
icono: "fa-folder",
idPadre: 40,
nombre: "Carpeta sin titulo2aaaaaaaaaaaaaaa",
idCarpeta: 46,
Miembros: ""
},
{
icono: "fa-folder",
idPadre: 40,
nombre: "Carpeta sin titulo3232",
idCarpeta: 47,
Miembros: ""
},
{
nombre: "Carpeta sin titulo211111",
idCarpeta: 49,
Miembros: "",
icono: "fa-folder",
idPadre: 40
},
{
Miembros: "",
nombre: "Carpeta sin titulo212312",
idCarpeta: 50,
idPadre: 40,
icono: "fa-folder"
},
{
nombre: "Carpeta sin titulo2222",
idCarpeta: 51,
Miembros: "",
icono: "fa-folder",
idPadre: 40
},
{
icono: "fa-folder",
idPadre: 40,
Miembros: "",
nombre: "Crarsa",
idCarpeta: 52
},
{
Miembros: "",
nombre: "Otra",
idCarpeta: 53,
idPadre: 40,
icono: "fa-folder"
},
{
idPadre: 40,
icono: "fa-folder",
nombre: "OMG",
idCarpeta: 54,
Miembros: ""
},
{
icono: "fa-folder",
idPadre: 40,
Miembros: "",
nombre: "Carpeta sin titulo",
idCarpeta: 56
},
{
Miembros: "",
idCarpeta: 57,
nombre: "ASD",
idPadre: 40,
icono: "fa-folder"
},
{
idPadre: 40,
icono: "fa-folder",
Miembros: "",
idCarpeta: 61,
nombre: "Carpeta sin titulo2"
},
{
idPadre: 40,
icono: "fa-folder",
idCarpeta: 62,
nombre: "Carpeta sin titulo2",
Miembros: ""
},
{
icono: "fa-folder",
idPadre: 40,
Miembros: "",
idCarpeta: 69,
nombre: "Alex"
},
{
icono: "fa-folder",
idPadre: 40,
idCarpeta: 70,
nombre: '"Carpeta sin titulo2"',
Miembros: ""
},
{
idPadre: 40,
icono: "fa-folder",
idCarpeta: 71,
nombre: "'Carpeta sin titulo2'",
Miembros: ""
},
{
icono: "fa-folder",
idPadre: 40,
Miembros: "",
idCarpeta: 72,
nombre: "`Carpeta sin titulo`"
},
{
icono: "fa-folder",
idPadre: 40,
idCarpeta: 73,
nombre: "ASD",
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",
callback: function (itemKey, opt, e) {
if (e.which == 3 || e.which == 2) {
return false;
}
}
},
"from-url": {
name: "Desde un enlace",
icon: "fas fa-link",
callback: function (itemKey, opt, e) {
if (e.which == 3 || e.which == 2) {
return false;
}
}
}
}
},
"upload-folders": {
name: "Subir carpetas",
icon: "fas fa-folder-plus",
callback: function (itemKey, opt, 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, opt, 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",
callback: function (item, opt, e) {
if (e.which == 3 || e.which == 2) {
return false;
}
}
},
"move-to": {
name: "Mover a",
icon: "fas fa-exchange-alt",
callback: function (itemKey, opt, e) {
if (e.which == 3 || e.which == 2) {
return false;
}
}
},
hr: "---------",
remove: {
name: "Quitar",
icon: "far fa-trash-alt",
callback: function (itemKey, opt, 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",
className: "sm-context-menu",
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", ".folder-box", 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>
You just have to change in your event, the preventDefault method to a return false :