Bom estou montando este context Menu dentro de uma tabela, ele esta funcionando perfeitamente, ao clicar com botão direito ele se abre. Porém quem clica no link ele fecha sem redirecionar para página, alguém sabe qual é o problema.
// Abre menu
var aberto = false;
$(document).ready(function () {
// Abre o menu
$("body").mousedown(function (e) {
e = e || window.event;
var element = e.target || e.srcElement;
var parentNode = element.parentNode;
while (aberto) {
if (parentNode.tagName === "TR")
{
break;
} else if (parentNode.tagName === "HTML" || parentNode.tagName === "BODY") {
closeMenu();
break;
} else {
parentNode = parentNode.parentNode;
}
}
});
$("tr").mousedown(function (e) {
// Devolve o background da tabela
$("table.tab_dados tr").removeClass('bg-yellow-2 text-white');
// Verifica qual botão clicou com botão direito, ou se deu clique longo
if (((e.button === 2) || (isMobile() !== null)) && (aberto === false)) {
aberto = true;
// Veriaveis de cálculo
var pX = e.pageX;
var pY = e.pageY;
// Calculos da posição
// Dentro das Tabs-Abas
if ($(".tabs-container").length) {
pX = pX + 10;
pY = pY - 40;
// Dentro do Container
if ($(".container-body").length) {
pX = pX - 10;
pY = pY + 40;
}
}
// Verifica a posição Mobile
if (isMobile() !== null) {
pX = 100;
}
// Define a posição do menu
$('#menu' + this.id + '').css({
left: (pX + "px"),
top: (pY + "px")
}).toggle('fast');
// Adiciona CSS na linha selecionada
$("#" + this.id).addClass('bg-yellow-2 text-white');
} else {
closeMenu();
}
});
function closeMenu() {
aberto = false;
// Fecha menu
$(".context_menu_pai").toggle(aberto, 'fast');
// Devolve o background da tabela
$("table.tab_dados tr").removeClass('bg-yellow-2 text-white');
}
});
function isMobile() {
// Verifica o browser
var isMobile = {
Android: function () {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function () {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function () {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function () {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function () {
return navigator.userAgent.match(/IEMobile/i);
},
any: function () {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
return isMobile.any();
}
/*====================================================================================================================*/
/* Context_Menu */
/*====================================================================================================================*/
.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, .sidenav_menu:hover {
background: #EEEEEE;
border-left: 7px solid #0091FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body oncontextmenu='return false'>
<table class="tab_dados">
<tr>
<th>id</th>
<th>CÓDIGO</th>
<th>NOME</th>
<th>CIDADE</th>
<th>ESTADO</th>
</tr>
<tr id='1'>
<td>4</td>
<td>25</td>
<td>HUGO</td>
<td>BOA ESPERANÇA</td>
<td>MG</td>
</tr>
<tr id='2'>
<td>3</td>
<td>25</td>
<td>HUGO</td>
<td>BOA ESPERANÇA</td>
<td>MG</td>
</tr>
</table>
<!-- Contex Menu -->
<div class='context_menu_pai' 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>
<div class='context_menu_pai' id='menu2'>
<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>