Problem with verification in my jquery

0

I'm setting up a menu that by right clicking on the 'tr' of the table it opens, and when clicking with the mouse for more than 1 second it should also open.

The checks are correct as per the log, but the menu only opens with the right button. Can anyone help me find the problem?

    // Verifica se vai fechar o menu
$(function () {
    $("body").on("click", function (e) {
        var div = $(".context_menu_pai");
        if (div.has(e.target).length || e.target === div[0]) {
            return;
        } else {

            // Remove o CSS da linha selecionada
            $("table.tab_dados tr").removeClass('bg-yellow-2 text-white');

            // Fecha menu
            $(".context_menu_pai").hide();

            // Devolve o background da tabela
            AlternarCor();
        }
    });
});

// Inicia variável
var tempo;

// Verifica se abre o menu
$("tr").mousedown(function () {

    // Set tempo ao clicar
    tempo = new Date().getTime();

}).mouseup(function (e) {

    // Diferença entre clicar e soltar
    var total = new Date().getTime() - tempo;
    var segundos = ((total % 60000) / 1000).toFixed(0);

    console.log(e.button);
    console.log(segundos);

    // Verifica qual botão clicou com botão direito, ou se deu clique longo
    if ((e.button === 2) || (segundos > 0)) {

        console.log("ok abre o menu");

        // Veriaveis de cálculo
        var pX = e.pageX;
        var pY = e.pageY;

        // Calculos da posição
        if ($(".tabs-container").length) {
            pX = pX - 10;
            pY = pY - 40;
        }
        if ($(".tab_dados").length) {
            pX = pX - 10;
            pY = pY - 10;
        }

        // Define a posição do menu            
        $('.context_menu_pai').css({
            left: (pX + "px"),
            top: (pY + "px")
        }).show();

        // Remove o CSS da linha selecionada
        $("table.tab_dados tr").removeClass('bg-yellow-2 text-white');

        // Menu
        $("#menu" + this.id).show();
        $(".context_menu_pai:not(#menu" + this.id + ")").hide();

        // Adiciona CSS na linha selecionada
        $("#" + this.id).addClass('bg-yellow-2 text-white');
    } else {

        // Fecha menu
        $(".context_menu_pai").hide();
    }
});

// Devolve o background da tabela
function AlternarCor() {
    $(".tab_dados tr").css("tab_dados");
}
.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 {
  background: #EEEEEE;
  border-left: 7px solid #0091FF;
}
.tab_dados {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
.tab_dados a {
  color: #484848;
  text-decoration: none;
}
.tab_dados th {
  background: #0091FF;
  color: #FFFFFF;
  font-style: italic;
}
.tab_dados tr {
  height: 50px;
  border-bottom: 1px solid #D5D5D5;
}
.tab_dados tr:nth-child(odd) {
  background: #F7F7F7;
}
.tab_dados tr:nth-child(even) {
  background: #FFFFFF;
}
.tab_dados tr:hover {
  background: #F1F1F1;
}
tfoot tr td {
  border: 0;
  height: 40px;
}
.tfoot {
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><bodyoncontextmenu='returnfalse'><!--TABELA--><tableclass="tab_dados">
    <tr>
      <th>IDADE</th>
      <th>NOME</th>
      <th>CIDADE</th>
      <th>ESTADO</th>
    </tr>

    <tr id='1'>
      <td>25</td>
      <td>HUGO</td>
      <td>BOA ESPERANÇA</td>
      <td>MG</td>
    </tr>
  </table>

  <!-- Contex Menu -->
  <div class='context_menu_pai shadow-2' 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 class='context_menu' onclick='document.location = "http://www.google.com"'>Visualizar</div>
    <div class='context_menu text-blue-2' onclick='document.location = "http://www.google.com"'>Editar</div>
    <div class='context_menu text-green-2' onclick='document.location = "http://www.google.com"'>Deletar</div>
    <div class='context_menu text-red-2' onclick='document.location = "http://www.google.com"'>Visualizar</div>
  </div>

  <!-- TABELA FOOT-->
  <table>
    <tfoot>
      <tr>
        <td>Total exibido: 1</td>
      </tr>
    </tfoot>
  </table>
    
asked by anonymous 15.12.2016 / 18:40

0 answers