How do you get the mouse position relative to the page?

Navigation
4

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 you're getting Y X based on my monitor, and I need to get it based on the size of the page.

Does anyone know how to solve this?

Follow the code in jsfiddle to make it easier, because I've already configured the larger page to get the 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><divclass='context_menu_pai'id='menu2'><liclass='context_menu'>Editar</li><liclass='context_menu'>Acessar</li><liclass='context_menu'>Indicou(0)</li><liclass='context_menutext_erro'>Bloquear</li></div><tablewidth="100%" border="1">

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



</table>
    
asked by anonymous 15.04.2016 / 21:09

1 answer

4

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

page refers to the document. I guess that's what you're looking for. The client refers to the "client window", ie 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 .pageX and .pageY . Native events have these properties, and jQuery also displays them in their events, with the same name. The description, which I have explained above is:

  

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

    
15.04.2016 / 23:27
Performance difference between static and shared library assign variable with id dynamically via jquery