Position de la souris dans la page

Dernière mise à jour le par @karamel .

detecter la position de la souris dans la page pour tous les navigateurs

Ce petit tutorial n'a pas d'autre but que de montrer comment recuperer la position de la souris dans une page et ce quelque soit sa position dans la fenetre d'affichage et quelque soit navigateur utilisé

passage de l'argument event

La position de la souris fait partie de la gestion par le dom des evenement et appartient a l'objet event c'est une méthodes de cette objet.

event sera implicitement appelé a chaque deplacement de la souris par l'intermédiaire de l'evenement mousemove et L'argument passé a la fonction fera référence a event

function WhereMouse( evt ){

detection de la methode du support de event

il existe deux methodes de gestion des evenements une utilisé par ie 8 7 6 et qui n'a pas besoin de l'argument de la fonction et une autre utilisé pas tous les navigateurs et ie >=9

on teste donc si l'argument est null c'est le cas pour ie 8 7 6 si c'est le cas on assigne a evt event sinon evt contient bien une reference a l'evenement déclencheur dans notre cas mousemove

  evt = !evt ? event : evt

Position de la souris dans le navigateur

Pour ce faire on utilise les methodes clientX et clientY qui representes les coordonnes en X et Y de la souris dans la fenetre du navigateur.

on assigne la position en X a la variable Mouse_X et la position en Y a la variable Mouse_Y

Mouse_X = evt.clientX; 
Mouse_Y = evt.clientY

position des barres de scroll

On rajoute la position des la barre de scroll en horizontal et verticale

pour la position du scrollbar les navigateur de la famille webKit (chrome opera chromium ..etc)diffères des autres navigateur dans le sens ou l'on doit se positionner dans le header (head) de la page pour recuperer la position du scroll alors que pour les autres navigateur ( internet explorer firefox ...etc) on se positionne dans le corp de la page (body).

var scroll_x=document.body.scrollLeft || document.documentElement.scrollLeft;
var scroll_y=document.body.scrollTop || document.documentElement.scrollTop;

Mouse_X += scroll_x;
Mouse_Y += scroll_y;

}

initialisation

on rajoute a la page l'evenement onmousemove afin de déclancher la fonction a chaque deplacement de la souris.

de meme que pour event on detecte si le navigateur implémente attachEvent ( ie ) ou addEventListener (w3c) et on adapte donc le code.

typeof window.addEventListener == 'undefined' ? document.attachEvent("onmousemove",WhereMouse) : document.addEventListener('mousemove',WhereMouse,false);
 ;

le script complet avec en plus deux input pour visualisé les positions

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script language ="JavaScript" type= "text/javascript">

function WhereMouse( evt ){

evt = !evt ? event : evt

var Mouse_X = evt.clientX; 
var Mouse_Y = evt.clientY;

var scroll_x=document.body.scrollLeft || document.documentElement.scrollLeft;
var scroll_y=document.body.scrollTop || document.documentElement.scrollTop;

Mouse_X += scroll_x;
Mouse_Y += scroll_y;

document.getElementById('imp1').value=Mouse_X
document.getElementById('imp2').value=Mouse_Y
}


typeof window.addEventListener == 'undefined' ? document.attachEvent("onmousemove",WhereMouse) : document.addEventListener('mousemove',WhereMouse,false);

 </script>
</head>


<body>
<div style='position:fixed'>
X <input type =texte id='imp1'/>
<br>
<br>
Y <input type =texte id='imp2'/>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>

plus simple

le réel problème rencontré est la différence de syntaxe du principalement a la gestion des évènement entre le standard du w3c et les anciennes versions d'internet explorer jusqu'à la version 8 mais des la version 9 internet explorer c'est rallié au w3c et si le support de ie 8 n'est pas une obligation la syntaxe sera nettement plus simple d'une part parce que la gestion des evenements est la meme pour tous les navigateurs et aussi parce qu'il existe les méthodes pageX et pageY qui prennes en compte le scrolling de la page.

la version incompatible avec ie 8 et inférieure mais compatible avec tous les navigateur y compris ie 9 et supérieure

function WhereMouse( evt ){

var Mouse_X = evt.pageX;
var Mouse_Y = evt.pageY;

document.getElementById('imp1').value=Mouse_X
document.getElementById('imp2').value=Mouse_Y
}

document.addEventListener('mousemove',WhereMouse,false);

That's All Folks !...

Aller Bon Code...

;0)

A voir également
Ce document intitulé « Position de la souris dans la page » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Void
gestion de fichier en javascript avec activex
Rejoignez-nous