Problem with checking in my jquery

Question

Problem with checking in my jquery

Asked 7 years, 11 months ago

Viewed 52 times

0

Well I am mounting a menu that when right clicking on the 'tr' of the table it opens, and when clicking with the mouse more than 1 second it tbm should open.

The checks are correct according to the log, but the menu only opens with the right button. Someone can help me locate 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>

<body oncontextmenu='return false'>
  <!-- TABELA -->
  <table class="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>

One mistake I found is that its functions so changed, you need to put the mousedown first and then the mouseup, because that is the order in which the events occur. Just change the names and get it right. But then an error occurs that any click it opens the menu, I think it is something wrong with the time variable.

– leofontes

2016/12/15 at 18:23
I tried that already and it didn’t work, have some other idea?

– Hugo Borges

2016/12/15 at 18:35
Take a look at that answer, I think that’s exactly what you need http://stackoverflow.com/a/2625240/3473971

– leofontes

2016/12/15 at 18:41
tried that way and it didn’t work. I no longer know what can be hahahah

– Hugo Borges

2016/12/15 at 19:18

No answers

Browser other questions tagged javascript jquery

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