problem with firefox menu

Asked

Viewed 57 times

1

Galera set up 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 keeps closing when I move the mouse.

I have tested on all browsers and this is all ok. Does anyone know what can be?

I will put the jsfiddle link because it is easier to test the error in firefox.

Link

Thanks 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>
<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 ======================================

I noticed that the error occurs 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 however accurate the calculation. what’s wrong with it?

jquery html css javascript
  • 1

    Buddy, follow what I’m trying to do in the fiddle. I managed to keep the edit function, but in the other options it still disappears, but I will pass on my progress so far. http://jsfiddle.net/q6jGr/190/

  • 1

    In the output function setting there is a typo on the line var novo = e.toElement;, that should be var novo = e.toElement();. That seems to solve the problem here.

  • Well Daniel just needs the menu to stay open. Pathetic really solves the double click problem, but the menu no longer closes when removing the mouse from it. You know what it can be?

  • 1

    @Hugoborges Yesterday I did only one part to try to give you a little push and also not have time to solve all. I’m going to try to resolve this situation today, if by any chance I can resolve it before I warn :)

  • 1

    Hi thanks for the help. good based on what you did I ended up solving the problem :)

1 answer

0

Good 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();
    }
   });

Browser other questions tagged jquery html css javascript

You are not signed in. Login or sign up in order to post.