Galera montei uma tabela onde clico com botão direito sobre ela e abra um menu. O problema e que no firefox tenho que dar 2 cliques. E ele fica fechando quando movimento o mouse.
Testei em todos os navegadores e esta tudo ok. Alguém sabe o que pode ser?
Vou colocar o link do jsfiddle pois fica mais fácil para testar o erro no firefox.
Desde já agradeço.
document.oncontextmenu = function() {
return false;
};
sair = function(e) {
var novo = e.toElement;
if (!($(novo).closest('.context_menu_pai').length || $(novo).closest('#' + menu).length)) {
$(".context_menu_pai").hide();
menu = false;
}
};
var menu = false;
$("tr")
.mousedown(function(e) {
// Define a posição do menu
$('.context_menu_pai').css({
"margin-left": e.clientX,
"margin-top": e.clientY
});
// Exibe o menu
if (e.button === 2) {
menu = this.id;
$("#menu" + this.id).show();
$(".context_menu_pai:not(#menu" + this.id + ")").hide();
} else {
$(".context_menu_pai").hide();
menu = false;
}
})
.on('mouseout', function(e) {
sair(e);
});
$('.context_menu_pai').on('mouseout', function(e) {
sair(e);
});
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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='context_menu_pai' id='menu1'>
<li class='context_menu'>Editar</li>
</div>
<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>
<div class='context_menu_pai' id='menu3'>
<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="1">
<td>ID:1</td>
<td>Nome</td>
<td>Idade</td>
</tr>
<tr id="2">
<td>ID:2</td>
<td>Nome</td>
<td>Idade</td>
</tr>
<tr id="3">
<td>ID:3</td>
<td>Nome</td>
<td>Idade</td>
</tr>
</table>
Update ======================================
Notei que o erro ocorro por causa deste calculo:
// Calculos da posição
var pX = e.clientX - 32;
var pY = e.clientY - 105;
// Define a posição do menu
$('.context_menu_pai').css({
"margin-left": pX,
"margin-top": pY
}).show();
Se eu usar o código assim:
// Define a posição do menu
$('.context_menu_pai').css({
"margin-left": e.clientX,
"margin-top": e.clientY
}).show();
Ele funciona perfeitamente porem preciso do cálculo. o que esta errado com ele?
var novo = e.toElement;
, que deveria servar novo = e.toElement();
. Isso parece resolver o problema aqui.