0
Well I am mounting a menu that when right clicking on the 'tr' of the table it opens, and when clicking with the mouse more than 1 second it tbm should open.
The checks are correct according to the log, but the menu only opens with the right button. Someone can help me locate the problem?
// Verifica se vai fechar o menu
$(function () {
$("body").on("click", function (e) {
var div = $(".context_menu_pai");
if (div.has(e.target).length || e.target === div[0]) {
return;
} else {
// Remove o CSS da linha selecionada
$("table.tab_dados tr").removeClass('bg-yellow-2 text-white');
// Fecha menu
$(".context_menu_pai").hide();
// Devolve o background da tabela
AlternarCor();
}
});
});
// Inicia variável
var tempo;
// Verifica se abre o menu
$("tr").mousedown(function () {
// Set tempo ao clicar
tempo = new Date().getTime();
}).mouseup(function (e) {
// Diferença entre clicar e soltar
var total = new Date().getTime() - tempo;
var segundos = ((total % 60000) / 1000).toFixed(0);
console.log(e.button);
console.log(segundos);
// Verifica qual botão clicou com botão direito, ou se deu clique longo
if ((e.button === 2) || (segundos > 0)) {
console.log("ok abre o menu");
// Veriaveis de cálculo
var pX = e.pageX;
var pY = e.pageY;
// Calculos da posição
if ($(".tabs-container").length) {
pX = pX - 10;
pY = pY - 40;
}
if ($(".tab_dados").length) {
pX = pX - 10;
pY = pY - 10;
}
// Define a posição do menu
$('.context_menu_pai').css({
left: (pX + "px"),
top: (pY + "px")
}).show();
// Remove o CSS da linha selecionada
$("table.tab_dados tr").removeClass('bg-yellow-2 text-white');
// Menu
$("#menu" + this.id).show();
$(".context_menu_pai:not(#menu" + this.id + ")").hide();
// Adiciona CSS na linha selecionada
$("#" + this.id).addClass('bg-yellow-2 text-white');
} else {
// Fecha menu
$(".context_menu_pai").hide();
}
});
// Devolve o background da tabela
function AlternarCor() {
$(".tab_dados tr").css("tab_dados");
}.context_menu_pai {
display: none;
position: absolute;
width: 200px;
background: #FFFFFF;
z-index: 98;
}
.context_menu {
padding: 12px 8px;
cursor: pointer;
display: block;
color: #484848;
border-left: 7px solid #FFFFFF;
}
.context_menu:hover {
background: #EEEEEE;
border-left: 7px solid #0091FF;
}
.tab_dados {
width: 100%;
border-collapse: collapse;
text-align: center;
}
.tab_dados a {
color: #484848;
text-decoration: none;
}
.tab_dados th {
background: #0091FF;
color: #FFFFFF;
font-style: italic;
}
.tab_dados tr {
height: 50px;
border-bottom: 1px solid #D5D5D5;
}
.tab_dados tr:nth-child(odd) {
background: #F7F7F7;
}
.tab_dados tr:nth-child(even) {
background: #FFFFFF;
}
.tab_dados tr:hover {
background: #F1F1F1;
}
tfoot tr td {
border: 0;
height: 40px;
}
.tfoot {
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<body oncontextmenu='return false'>
<!-- TABELA -->
<table class="tab_dados">
<tr>
<th>IDADE</th>
<th>NOME</th>
<th>CIDADE</th>
<th>ESTADO</th>
</tr>
<tr id='1'>
<td>25</td>
<td>HUGO</td>
<td>BOA ESPERANÇA</td>
<td>MG</td>
</tr>
</table>
<!-- Contex Menu -->
<div class='context_menu_pai shadow-2' id='menu1'>
<div class='context_menu' onclick='document.location = "http://www.google.com"'>Editar</div>
<div class='context_menu' onclick='document.location = "http://www.google.com"'>Deletar</div>
<div class='context_menu' onclick='document.location = "http://www.google.com"'>Visualizar</div>
<div class='context_menu text-blue-2' onclick='document.location = "http://www.google.com"'>Editar</div>
<div class='context_menu text-green-2' onclick='document.location = "http://www.google.com"'>Deletar</div>
<div class='context_menu text-red-2' onclick='document.location = "http://www.google.com"'>Visualizar</div>
</div>
<!-- TABELA FOOT-->
<table>
<tfoot>
<tr>
<td>Total exibido: 1</td>
</tr>
</tfoot>
</table>
One mistake I found is that its functions so changed, you need to put the mousedown first and then the mouseup, because that is the order in which the events occur. Just change the names and get it right. But then an error occurs that any click it opens the menu, I think it is something wrong with the time variable.
– leofontes
I tried that already and it didn’t work, have some other idea?
– Hugo Borges
Take a look at that answer, I think that’s exactly what you need http://stackoverflow.com/a/2625240/3473971
– leofontes
tried that way and it didn’t work. I no longer know what can be hahahah
– Hugo Borges