Como obter a posição do mouse no jQuery sem eventos de mouse?


101

Gostaria de obter a posição atual do mouse, mas não quero usar:

$(document).bind('mousemove',function(e){ 
        $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY); 
}); 

porque eu só preciso obter a posição e processar as informações


3
.pageX e .pageY podem ser lidos de qualquer evento, não apenas .mousemove (). Por exemplo, talvez você queira saber exatamente onde um usuário clicou dentro de um determinado div: Aqui está um exemplo em que ouvimos um evento de clique dentro de um determinado div chamado #special. ..... docs.jquery.com/…
Haim Evgi

isso também pode ajudá-lo a obter os locais do ponteiro do mouse para sites responsivos. kvcodes.com/2014/03/…
Kvvaradha

Respostas:


151

Não acredito que haja uma maneira de consultar a posição do mouse, mas você pode usar um mousemovemanipulador que apenas armazena as informações, para que você possa consultar as informações armazenadas.

jQuery(function($) {
    var currentMousePos = { x: -1, y: -1 };
    $(document).mousemove(function(event) {
        currentMousePos.x = event.pageX;
        currentMousePos.y = event.pageY;
    });

    // ELSEWHERE, your code that needs to know the mouse position without an event
    if (currentMousePos.x < 10) {
        // ....
    }
});

Mas quase todo o código, exceto setTimeoutcódigo e outros, é executado em resposta a um evento, e a maioria dos eventos fornece a posição do mouse. Portanto, seu código que precisa saber onde o mouse está provavelmente já tem acesso a essas informações ...


7
$(window).load(function(e){ console.log(e.pageX,e.pageY); });retorna indefinido para a posição do mouse
spb

9
@TJCrowder Bastante óbvio, eu acho, ele está dizendo que há um evento por aí que não fornece a posição do mouse, para responder à resposta que afirma que "quase todos (todos?)" Os eventos fornecem a posição do mouse.
fabspro

2
Na defesa de @TJCrowder, ele DISSE QUASE tudo. Respondendo com algo que não seja tão útil ou proposital. Acho que o objetivo dessa resposta é mostrar ao usuário que em seu exemplo ele não precisa usar o movimento do mouse ... ele pode usar qualquer coisa. O usuário não disse especificamente obter sem um evento, o que TJCrowder aponta que quase TODOS os códigos acontecem após ALGUNS eventos. Claro que ele menciona este APÓS mostrando uma forma viável de fazer sua própria função que faz o que ele precisa. A resposta me ajudou de qualquer maneira.
Tyler de

1
@Tyler: Obrigado. :-) "quase tudo" foi uma mudança subsequente, minha linguagem inicial era muito forte.
TJ Crowder

26

Você não pode ler a posição do mouse no jQuery sem usar um evento. Observe primeiro que as propriedades event.pageXe event.pageYexistem em qualquer evento, então você pode fazer:

$('#myEl').click(function(e) {
    console.log(e.pageX);
});

Sua outra opção é usar um encerramento para dar a todo o seu código acesso a uma variável que é atualizada por um manipulador mousemove:

var mouseX, mouseY;
$(document).mousemove(function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
}).mouseover(); // call the handler immediately

// do something with mouseX and mouseY

Um problema com isso é que você não tem pageX e pageY ou clientX e clientY ao arrastar no Firefox ... Há alguma maneira de obter pageY ao arrastar?
JamesTBennett

11

Eu usei este método:

$(document).mousemove(function(e) {
    window.x = e.pageX;
    window.y = e.pageY;
});

function show_popup(str) {
    $("#popup_content").html(str);
    $("#popup").fadeIn("fast");
    $("#popup").css("top", y);
    $("#popup").css("left", x);
}

Dessa forma, sempre terei a distância do topo salva em y e a distância da esquerda salva em x.


6

Além disso, os mousemoveeventos não são disparados se você arrastar e soltar sobre uma janela do navegador. Para rastrear as coordenadas do mouse durante o arrastar e soltar, você deve anexar o manipulador para o document.ondragoverevento e usar sua propriedade originalEvent.

Exemplo:

var globalDragOver = function (e)
{
    var original = e.originalEvent;
    if (original)
    {
        window.x = original.pageX;
        window.y = original.pageY;
    }
}

2

use window.event- contém o último evente como qualquer um eventcontém pageX, pageYetc. Funciona para Chrome, Safari, IE, mas não FF.


0
var CurrentMouseXPostion;
var CurrentMouseYPostion;

$(document).mousemove(function(event) {
    CurrentMouseXPostion = event.pageX;
    CurrentMouseYPostion = event.pageY;
});

Faça um eventListener no objeto principal, no meu caso, o objeto de documento, para pegar o mouse em todos os quadros e armazená-los em variáveis ​​globais, e assim você pode ler o Y e Z do mouse sempre que quiser, onde quiser.


-1

Me deparei com isso, que seria bom compartilhar ...

O que é que vocês acham?

$(document).ready(function() {
  window.mousemove = function(e) {
    p = $(e).position();  //remember $(e) - could be any html tag also.. 
    left = e.left;        //retrieving the left position of the div... 
    top = e.top;          //get the top position of the div... 
  }
});

e bum, aí está ..

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.