web-dev-qa-db-fra.com

Comment obtenir la position de la souris dans jQuery sans les événements de souris?

J'aimerais connaître la position actuelle de la souris, mais je ne veux pas utiliser:

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

parce que je dois juste obtenir la position et traiter l'information

jquerymouseposition
92
Martin Vseticka

Je ne crois pas qu'il existe un moyen d'interroger la position de la souris, mais vous pouvez utiliser un gestionnaire mousemove qui stocke simplement les informations, afin que vous puissiez interroger les informations stockées.

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

Mais presque tout le code, autre que le code setTimeout, s'exécute en réponse à un événement et la plupart des événements fournissent la position de la souris. Donc, votre code qui a besoin de savoir où se trouve la souris a probablement déjà accès à cette information ...

144
T.J. Crowder

Vous ne pouvez pas lire la position de la souris dans jQuery sans utiliser un événement. Notez tout d'abord que les propriétés event.pageX et event.pageY existent pour tout événement, vous pouvez donc:

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

Votre autre option consiste à utiliser une fermeture pour donner à votre code entier accès à une variable qui est mise à jour par un gestionnaire 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
26
lonesomeday

J'ai utilisé cette méthode:

$(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 cette façon, j'aurai toujours la distance depuis le sommet enregistrée dans y et la distance depuis la gauche enregistrée dans x.

10
Nicu Criste

De plus, les événements mousemove ne sont pas déclenchés si vous effectuez un glisser-déposer sur une fenêtre de navigateur. Pour suivre les coordonnées de la souris pendant le glisser-déposer, vous devez attacher un gestionnaire pour l'événement document.ondragover et utiliser sa propriété originalEvent.

Exemple:

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

use window.event - il contient le dernier event et comme tout event contient pageX, pageY etc. Fonctionne pour Chrome, Safari, IE mais pas FF.

2
Oleksandr Tsurika