Galera tenho um menu que se abre quando clico com botão direito sobre a tabela.
O problema e que não consegui pegar a posição do mouse quando a página tem scroll.
Percebi que esta pegando o Y X com base no meu monitor, e preciso que ele pegue com base no tamanho da página.
Alguém sabe como resolver isso?
Segue o código no jsfiddle para facilitar, pois ja configurei a página maior para ocorrer o bug.
document.oncontextmenu = function() {
return false;
};
// Verifica se abre o menu
$("tr").mousedown(function (e) {
// Define a posição do menu
$('.context_menu_pai').css({
"margin-left": e.clientX,
"margin-top": e.clientY
}).show();
// Verifica qual botão clicou
if (e.button === 2) {
$("#menu" + this.id).show();
$(".context_menu_pai:not(#menu" + this.id + ")").hide();
// Adiciona CSS na linha selecionada
$("#" + this.id).addClass('context_menu_select');
} else {
// Fecha menu
$(".context_menu_pai").hide();
}
});
body {
margin: 0;
color: #484848;
font-family: Verdana;
font-size: 13px;
}
.context_menu_pai {
display: none;
position: absolute;
width: 200px;
background: #FFFFFF;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
border-radius: 2px;
}
.context_menu {
padding: 12px 8px;
cursor: pointer;
display: block;
color: #484848;
}
.context_menu:hover {
background: #EEEEEE;
}
.text_erro {
color: #F65314;
}
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class='context_menu_pai' id='menu2'>
<li class='context_menu'>Editar</li>
<li class='context_menu'>Acessar</li>
<li class='context_menu'>Indicou(0)</li>
<li class='context_menu text_erro'>Bloquear</li>
</div>
<table width="100%" border="1">
<tr id="2">
<td>ID:2</td>
<td>Nome</td>
<td>Idade</td>
</tr>
</table>