problem with menu in firefox

Question

problem with menu in firefox

Navigation

#1 by (0 votes)

1

Galera I mounted a table where I right click on it and open a menu. The problem is that in firefox I have to give 2 clicks. And it closes when the mouse moves.

I tested it in all browsers and everything is ok. Does anyone know what it can be?

I'll put the jsfiddle link as it's easier to test the error in firefox.

Link

Thank you in advance.

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><divclass='context_menu_pai'id='menu1'><liclass='context_menu'>Editar</li></div><divclass='context_menu_pai'id='menu2'><liclass='context_menu'>Editar</li><liclass='context_menu'>Acessar</li><liclass='context_menu'>Indicou(0)</li><liclass='context_menutext_erro'>Bloquear</li></div><divclass='context_menu_pai'id='menu3'><liclass='context_menu'>Editar</li><liclass='context_menu'>Acessar</li><liclass='context_menu'>Indicou(0)</li><liclass='context_menutext_erro'>Bloquear</li></div><tablewidth="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 =============================================

I noticed that the error occurred because of this calculation:

// 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();

If I use the code like this:

// Define a posição do menu            
        $('.context_menu_pai').css({
            "margin-left": e.clientX,
            "margin-top": e.clientY
        }).show();

It works perfectly because I need the calculation. What is wrong with it?

javascript html jquery css

asked by anonymous 13.04.2016 / 22:30

1 answer

How to add text at specific position in Strings Array ".js" file generated by Gulp returns the error "require is not defined"

score 0 · Answer 1

Well I solved the problem this way:

    $("body").mousedown(function (e) {

    // Verifica qual botão clicou
    if (e.button !== 2) {

        // Remove o CSS da linha selecionada
        $("tr").removeClass('context_menu_select');
        // Fecha menu
        $(".context_menu_pai").hide();
    }
     });

    $("tr").mousedown(function (e) {

    // 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();

    // Remove o CSS da linha selecionada
    $("tr").removeClass('context_menu_select');

    // Verifica qual botão clicou
    if (e.button === 2) {
        $("#menu" + this.id).show();
        $(".context_menu_pai:not(#menu" + this.id + ")").hide();

        // Remove o CSS da linha selecionada
        $("#" + this.id).removeClass('linhas');
        // Adiciona CSS na linha selecionada
        $("#" + this.id).addClass('context_menu_select');
    } else {
        // Fecha menu
        $(".context_menu_pai").hide();
    }
   });