How to pick up mouse position relative to page?

Question

I have a menu that opens when I right click on the table.

The problem is that I could not get the mouse position when the page has scroll.

I noticed that you’re taking the Y X based on my monitor, and I need it to take based on the page size.

Someone knows how to fix this?

Follow the code in jsfiddle to make it easy, as I’ve already set the larger page to 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>

Answer 1

There are two coordinates passed to the event. O .pageX/Y and the .clientX/Y.

The page refers to the document. I think that’s what you’re looking for. The client refers to the "client window", that is to the browser window.

Take a look at this example (and scroll down):

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>

In the example you can compare the coordinates of each. So I suggest you use the .pageX and .pageY. Native events have these properties and jQuery also presents them at their events, with the same name. The description, which I explained above is:

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