4

Galera tenho um menu que se abre quando clico com botão direito sobre a tabela.

O problema e que não consegui pegar a posição do mouse quando a página tem scroll.

Percebi que esta pegando o Y X com base no meu monitor, e preciso que ele pegue com base no tamanho da página.

Alguém sabe como resolver isso?

Segue o código no jsfiddle para facilitar, pois ja configurei a página maior para ocorrer o bug.

Link

document.oncontextmenu = function() {
 return false;
};
// Verifica se abre o menu
$("tr").mousedown(function (e) {

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


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

        // Adiciona CSS na linha selecionada
        $("#" + this.id).addClass('context_menu_select');
    } else {
        // Fecha menu
        $(".context_menu_pai").hide();
    }
});
 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="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<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>




<table width="100%" border="1">

    <tr id="2">
    <td>ID:2</td>
    <td>Nome</td>
    <td>Idade</td>
  </tr>



</table>

3
  • Engraçado se colocar os <br> abaixo da tabela e nao do menu da certo Commented 15/04/2016 às 20:15
  • sim pois ele pega a posição do mouse sobre o tamanho da tela e não sobre o tamanho do html. Commented 15/04/2016 às 20:23
  • Ai quando ele vai mostrar o menu o html identifica que naquele espaço já existe um elemento e não deixa realizar a sobreposição Commented 15/04/2016 às 20:28

1 Resposta 1

4

Existem duas coordenadas passadas ao evento. O .pageX/Y e o .clientX/Y.

O page refere-se ao documento. Acho que é isso que procuras. O client refere-se ao "client window", ou seja á janela do browser.

Dá uma olhada neste exemplo (e faz scroll para baixo):

var reporter = document.getElementById('reporter');
window.addEventListener('mousemove', function(e) {
    var mouse = {
        page: {
            x: e.pageX,
            y: e.pageY
        },
        client: {
            x: e.clientX,
            y: e.clientY
        }
    };
    reporter.innerHTML = ['page', 'client'].map(function(type) {
        return [type, ,'x:', mouse[type].x, 'y:', mouse[type].y, '\n'].join(' ');
    }).join(' | ');
});
#reporter {
    position: fixed;
}

#highDiv {
    height: 200vh;
    margin-top: 30vh;
    width: 80vh;
    background: linear-gradient(#fcc, #558);
}
<div id="reporter"></div>
<div id="highDiv"></div>

No exemplo você pode comparar as coordenadas de cada. Assim sugiro que use o .pageX e .pageY. Os eventos nativos têm estas propriedades e o jQuery apresenta-as também nos seus eventos, com o mesmo nome. A descrição, que já expliquei em cima é:

The mouse position relative to the left edge of the document.

1
  • 1
    vlw muito obrigado, vc tirou varias dúvidas minhas :) Commented 16/04/2016 às 10:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .