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


101

Je souhaite connaître la position actuelle de la souris mais je ne souhaite pas utiliser:

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

parce que j'ai juste besoin d'obtenir le poste et de traiter les informations


3
.pageX et .pageY peuvent être lus de n'importe quel événement, pas seulement .mousemove (). Par exemple, vous voulez peut-être savoir exactement où un utilisateur a cliqué à l'intérieur d'un div particulier: Voici un exemple où nous écoutons un événement de clic à l'intérieur d'un div particulier appelé #special. ..... docs.jquery.com
Haim Evgi

cela peut également vous aider à obtenir les emplacements du pointeur de la souris pour les sites réactifs. kvcodes.com/2014/03/…
Kvvaradha

Réponses:


151

Je ne pense pas qu'il existe un moyen d' interroger la position de la souris, mais vous pouvez utiliser un mousemovegestionnaire qui stocke simplement les informations, afin de pouvoir 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 setTimeoutcode et autres, 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 à ces informations ...


7
$(window).load(function(e){ console.log(e.pageX,e.pageY); });renvoie undefined pour la position de la souris
spb

9
@TJCrowder Assez évident je pense, il dit qu'il y a un événement là-bas qui ne fournit pas la position de la souris, pour répondre à la réponse affirmant que "presque tous (tous?)" Les événements fournissent la position de la souris.
fabspro

2
Dans la défense @TJCrowder, il a dit presque tout. En répondant avec celui qui n'est pas si utile ou utile. Je pense que le but de cette réponse est de montrer à l'utilisateur que dans son exemple, il n'a pas besoin d'utiliser le mouvement de la souris ... il peut utiliser n'importe quoi. L'utilisateur n'a pas spécifiquement dit l'obtenir sans événement, ce que TJCrowder souligne que presque TOUT le code se produit après un événement. Bien sûr, il le mentionne APRÈS avoir montré un moyen viable de créer votre propre fonction qui fasse ce dont il a besoin. La réponse m'a aidé de toute façon.
Tyler

1
@Tyler: Merci. :-) "presque tout" était un changement ultérieur, ma langue initiale était trop forte.
TJ Crowder

26

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.pageXand event.pageYexistent sur n'importe quel événement, vous pouvez donc faire:

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

Votre autre option consiste à utiliser une fermeture pour donner à tout votre code accès à une variable 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

Un problème avec ceci est que vous n'avez pas pageX et pageY ou clientX et clientY lorsque vous faites glisser dans Firefox ... Un moyen d'obtenir pageY lorsque vous faites glisser?
JamesTBennett

11

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 du haut enregistrée en y et la distance de la gauche enregistrée en x.


6

De plus, les mousemoveévénements 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 le gestionnaire d' document.ondragoverévénement 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;
    }
}

2

utiliser window.event- il contient le dernier eventet comme tout eventcontient pageX, pageYetc. Fonctionne pour Chrome, Safari, IE mais pas FF.


0
var CurrentMouseXPostion;
var CurrentMouseYPostion;

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

Créez un eventListener sur l'objet principal, dans mon cas l'objet document, pour obtenir les coordonnées de la souris sur chaque image et les stocker dans des variables globales, et ainsi vous pouvez lire les Y et Z de la souris quand vous le souhaitez, où vous le souhaitez.


-1

Je suis tombé sur ça, ce serait sympa de partager ...

Qu'en pensez-vous?

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

et boum, nous l'avons là ...

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.