¿Cómo obtener la posición del mouse en jQuery sin eventos de mouse?


101

Me gustaría obtener la posición actual del mouse pero no quiero usar:

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

porque solo necesito conseguir el puesto y procesar la información


3
.pageX y .pageY se pueden leer de cualquier evento, no solo .mousemove (). Por ejemplo, tal vez desee saber exactamente dónde hizo clic un usuario dentro de un div en particular: Aquí hay un ejemplo en el que escuchamos un evento de clic dentro de un div particular llamado #special. ..... docs.jquery.com/…
Haim Evgi

esto también puede ayudarlo a obtener las ubicaciones del puntero del mouse para sitios receptivos. kvcodes.com/2014/03/…
Kvvaradha

Respuestas:


151

No creo que haya una forma de consultar la posición del mouse, pero puede usar un mousemovecontrolador que simplemente almacene la información, para que pueda consultar la información almacenada.

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) {
        // ....
    }
});

Pero casi todo el código, además del setTimeoutcódigo y demás , se ejecuta en respuesta a un evento, y la mayoría de los eventos proporcionan la posición del mouse. Entonces, su código que necesita saber dónde está el mouse probablemente ya tenga acceso a esa información ...


7
$(window).load(function(e){ console.log(e.pageX,e.pageY); });devuelve indefinido para la posición del mouse
spb

9
@TJCrowder Bastante obvio, creo, está diciendo que hay un evento por ahí que no proporciona la posición del mouse, para responder a la respuesta que afirma que "casi todos (¿todos?)" Los eventos brindan la posición del mouse.
fabspro

2
En defensa de @TJCrowder, DIJO CASI TODO. Responder con uno que no lo hace no es tan útil o útil. Creo que el objetivo de esta respuesta es mostrarle al usuario que en su ejemplo no tiene que usar el movimiento del mouse ... puede usar cualquier cosa. El usuario no dijo específicamente obtenerlo sin un evento, lo que TJCrowder señala que casi TODO el código ocurre después de ALGUNO evento. Por supuesto que menciona esto DESPUÉS de mostrar una forma viable de hacer su propia función que hace lo que necesita. La respuesta me ayudó de todos modos.
Tyler

1
@Tyler: Gracias. :-) "casi todo" fue un cambio posterior, mi lenguaje inicial era demasiado fuerte.
TJ Crowder

26

No puede leer la posición del mouse en jQuery sin usar un evento. En primer lugar , tenga en cuenta que las propiedades event.pageXy event.pageYexisten en cualquier evento, por lo que podría hacer:

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

Su otra opción es usar un cierre para darle acceso a todo su código a una variable que es actualizada por un controlador 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

Un problema con esto es que no tiene pageX y pageY o clientX y clientY al arrastrar en Firefox ... ¿Alguna forma de obtener pageY al arrastrar?
JamesTBennett

11

Usé 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);
}

De esta forma siempre tendré la distancia desde arriba guardada en y y la distancia desde la izquierda guardada en x.


6

Además, los mousemoveeventos no se activan si realiza arrastrar y soltar sobre una ventana del navegador. Para rastrear las coordenadas del mouse durante el proceso de arrastrar y soltar, debe adjuntar un controlador para el document.ondragoverevento y usar su propiedad originalEvent.

Ejemplo:

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

2

uso window.event- que contiene el pasado eventy como cualquier eventcontiene pageX, pageYetc. Obras para Chrome, Safari, IE pero no FF.


0
var CurrentMouseXPostion;
var CurrentMouseYPostion;

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

Haga un eventListener en el objeto principal, en mi caso el objeto de documento, para obtener las coordenadas del mouse en cada fotograma y almacenarlas en variables globales, y así puede leer Y y Z del mouse cuando quiera, donde quiera.


-1

Me encontré con esto, sería bueno compartirlo ...

¿Qué piensan ustedes?

$(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... 
  }
});

y boom, ahí lo tenemos ..

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.