Javascript - Suivre la position de la souris
Je suis l'espoir de suivre la position du curseur de la souris, périodiquement toutes les t mseconds. Donc, essentiellement, lorsqu'un chargement de la page - ce tracker doit commencer et pour (dire) toutes les 100 ms, je devrais obtenir la nouvelle valeur de posX et posY et imprimer le formulaire.
J'ai essayé le code suivant - mais les valeurs ne se rafraîchir uniquement les valeurs initiales de posX et posY présentent sous la forme de boîtes. Des idées sur comment je peux obtenir cette place et en cours d'exécution ?
<html>
<head>
<title> Track Mouse </title>
<script type="text/javascript">
function mouse_position()
{
var e = window.event;
var posX = e.clientX;
var posY = e.clientY;
document.Form1.posx.value = posX;
document.Form1.posy.value = posY;
var t = setTimeout(mouse_position,100);
}
</script>
</head>
<body onload="mouse_position()">
<form name="Form1">
POSX: <input type="text" name="posx"><br>
POSY: <input type="text" name="posy"><br>
</form>
</body>
</html>
- Le problème est qu'il n'y aura pas de
event
objet lorsque la fonction est appelée pour la deuxième fois. Vous devriez écouter certains cas que d'utilisersetTimeout
. - Oui, mais ne pas le mouse_position() fonction d'appel en lui-même toutes les 100 millisecondes. Ne devrait-elle pas en fait se comporter comme un infini fonction récursive ?
- double possible de la capture de la position de la souris sur la fonction setInterval() en Javascript
- Oui, mais je pense qu'il va d'erreur en raison
window.event
seraundefined
ounull
. Si il n'y a aucune manifestation, il n'y a pas deevent
objet. - d'intérêt, ce qui est de l'application du présent?
Vous devez vous connecter pour publier un commentaire.
La position du curseur souris est signalé sur le
event
objet reçu par un gestionnaire pour l'mousemove
événement, que vous pouvez attacher à la fenêtre (l'événement bulles):(À noter que le corps de cette
if
ne fonctionnera que sur les vieux IE.)Exemple de la ci-dessus en action - il attire les points que vous faites glisser votre souris sur la page. (Testé sur IE8, IE11, Firefox 30, Chrome 38.)
Si vous avez vraiment besoin d'une minuterie à base de solution, vous combinez cela avec certaines variables d'état:
Autant que je suis au courant, vous ne pouvez pas obtenir la position de la souris sans avoir vu un événement, quelque chose qui cette réponse à une autre question de Débordement de Pile semble le confirmer.
Note de côté: Si vous allez faire quelque chose tous les 100 ms (10 fois/seconde), essayez de garder le traitement réel-vous dans cette fonction très, très limité. C'est beaucoup de travail pour le navigateur, en particulier les plus âgés ceux de Microsoft. Oui, sur les ordinateurs modernes, il ne semble pas comme beaucoup, mais il se passe beaucoup de choses dans les navigateurs... Si par exemple, vous pouvez garder une trace de la dernière position de traitement et de caution à partir du gestionnaire immédiatement si la position n'a pas changé.
Voici une solution, basée sur jQuery et un événement de souris à l'écoute (ce qui est beaucoup mieux qu'une interrogation régulière) sur le corps:
Ouvrir votre console (Ctrl+Maj+J), copiez-collez le code ci-dessus et déplacez votre souris sur la fenêtre du navigateur.
Je crois que nous sommes avoir à y penser cela,
JS:
HTML:
document.body.addEventListener("mousemove", function (e) {})
est la façon de le faire, dans votre code javascript plutôt que dans le htmlCe que je pense qu'il ne veut connaître le X/Y des positions de curseur que pourquoi réponse est compliqué.
JS:
CSS:
HTML:
Quel que soit le navigateur, ci-dessous les lignes a fonctionné pour moi pour aller chercher de corriger la position de la souris.
event.clientX - event.currentTarget.getBoundingClientRect().left
event.clientY - event.currentTarget.getBoundingClientRect().top
ES6 code:
Si vous avez besoin de la limitation de mousemoving, utilisez ceci:
ici est exemple
Si voulez juste pour suivre le mouvement de la souris visuellement:
HTML: