Comment obtenir la position de la souris sans événements (sans déplacement de la souris)?

Vraie réponse: Non, il n'est pas possible.

OK, j'ai juste pensé à un moyen. La superposition de votre page avec un div qui couvre l'ensemble du document. À l'intérieur, créer (dire) de 2 000 x 2 000 <a> éléments (de sorte que le :hover pseudo-classe travail dans IE 6, voir), chaque 1 pixel de taille. Créer un CSS :hover règle pour ceux qui <a> éléments qui modifie une propriété (disons font-family). Dans votre gestionnaire de chargement, cycle de par chacune des 4 millions de <a> éléments, la vérification de currentStyle /getComputedStyle() jusqu'à ce que vous trouver celui avec le hover de la police. Extrapoler de retour de cet élément pour obtenir les coordonnées dans le document.

N. B. NE PAS faire CETTE.

Ce que vous pouvez faire est de créer des variables pour le x et y coordonnées de votre curseur, les mettre à jour à chaque fois que la souris bouge et appeler une fonction sur un intervalle de temps pour faire ce dont vous avez besoin avec la position enregistrée.

L'inconvénient de cette approche est qu'au moins un premier mouvement de la souris est nécessaire pour qu'il fonctionne. Tant que le curseur se met à jour sa position au moins une fois, nous sommes en mesure de trouver sa position, indépendamment de savoir si il se déplace à nouveau.

var cursorX;
var cursorY;
document.onmousemove = function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
}
setInterval(checkCursor, 1000);
function checkCursor(){
    alert("Cursor at: " + cursorX + ", " + cursorY);
}

Le code précédent mises à jour une fois par seconde avec un message de l'endroit où votre curseur est. J'espère que cette aide.

@Tim vers le Bas la réponse n'est pas performant si vous effectuez le rendu de 2 000 x 2 000 <a> éléments:

OK, j'ai juste pensé à un moyen. La superposition de votre page avec un div qui
couvre l'ensemble du document. À l'intérieur, créer (dire) de 2 000 x 2 000
éléments (de sorte que le :hover pseudo-classe travail dans IE 6, voir),
chaque 1 pixel de taille. Créer un CSS :hover règle pour les éléments
cela change un bien (disons que font-family). Dans votre gestionnaire de chargement,
cycle par chacune des 4 millions d'éléments, la vérification de
currentStyle /getComputedStyle() jusqu'à ce que vous trouver celui avec le
passez de police. Extrapoler de retour de cet élément pour obtenir les coordonnées
dans le document.

N. B. NE PAS le faire.

Mais vous n'avez pas à rendre de 4 millions d'éléments à la fois, au lieu d'utiliser la recherche binaire. Suffit d'utiliser 4 <a> éléments à la place:

• Étape 1: prendre en compte la totalité de l'écran de départ de la zone de recherche
• Étape 2: Découper la zone de recherche en 2 x 2 = 4 rectangle <a> éléments
• Étape 3: à l'Aide de la getComputedStyle() fonction de déterminer dans quel rectangle souris survole
• Étape 4: Réduire la zone de recherche pour que le rectangle et recommencez à partir de l'étape 2.

De cette façon, vous devez répéter ces étapes max 11 fois, compte tenu de votre écran n'est pas plus large que 2048px.

De sorte que vous allez générer max 11 x 4 = 44 <a> éléments.

Si vous n'avez pas besoin de déterminer la position de la souris exactement à un pixel, mais dire 10px précision est OK. Vous devez répéter les étapes à plus de 8 fois, de sorte que vous devez dessiner max 8 x 4 = 32 <a> éléments.

Également de générer puis de détruire la <a> éléments n'est pas performat que DOM est généralement lente. Au lieu de cela, vous pouvez réutiliser les 4 premiers <a> éléments et il suffit de régler leurs top, left, width et height en boucle à travers les étapes.

Maintenant, la création de 4 <a> est un overkill ainsi. Au lieu de cela, vous pouvez réutiliser le même <a> élément lors des tests pour getComputedStyle() dans chaque rectangle. Donc, au lieu de la division de la zone de recherche en 2 x 2 <a> éléments de réutiliser une seule <a> élément en le déplaçant avec top et left propriétés de style.

Donc, vous n'avez besoin que d'un seul <a> élément de changer son width et height max 11 fois, et de modifier son top et left max 44 fois et vous aurez l'exacte position de la souris.

La solution la plus simple mais pas précis à 100%

$(':hover').last().offset()

Résultat: {top: 148, left: 62.5}

Le résultat dépend de l'élément le plus proche de la taille et de retour undefined lorsque l'utilisateur a basculé l'onglet

Vous n'avez pas à déplacer de la souris pour obtenir l'emplacement du curseur. L'emplacement est également signalé sur d'autres événements que mousemove. Voici un cliquez sur l'événement comme un exemple:

document.body.addEventListener('click',function(e)
{
    console.log("cursor-location: " + e.clientX + ',' + e.clientY);
});

var x = 0;
var y = 0;

document.addEventListener('mousemove', onMouseMove, false)

function onMouseMove(e){
    x = e.clientX;
    y = e.clientY;
}

function getMouseX() {
    return x;
}

function getMouseY() {
    return y;
}

Je pense que j'ai peut-être une solution raisonnable avec le comptage des divs et les pixels..lol

Simplement utiliser l'animation image ou un intervalle de temps d'une fonction. vous aurez toujours besoin d'un événement de souris une seule fois mais juste pour lancer, mais techniquement, vous de la position de cette où vous le souhaitez.

Essentiellement, nous sommes sur les traces d'un mannequin div en tout temps avec le mouvement de la souris.

//create a div(#mydiv) 1px by 1px set opacity to 0 & position:absolute;

Ci-dessous est la logique..

var x,y;
$('body').mousemove(function( e ) {
var x = e.clientX - (window.innerWidth / 2);
var y = e.clientY - (window.innerHeight / 2);
}
function looping (){
/* track my div position 60 x 60 seconds!
with out the mouse after initiation you can still track the dummy div.x & y
mouse doesn't need to move.*/
$('#mydiv').x = x;    //css transform x and y to follow 
$('#mydiv)'.y = y;
console.log(#mydiv.x etc)
requestAnimationFrame( looping , frame speed here);
}