I'm setting up a menu that by right clicking on the 'tr' of the table it opens, and when clicking with the mouse for more than 1 second it should also open.
The checks are correct as per the log, but the menu only opens with the right button. Can anyone help me find 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><bodyoncontextmenu='returnfalse'><!--TABELA--><tableclass="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>