Comment obtenir la position de la souris sur un élément ?

Lorsqu'un gestionnaire d'évènement tel que mousedown ou mousemove est appelé, plusieurs propriétés relatives à la position de la souris peuvent être appelées. Vous pouvez obtenir la position du pointeur de la souris à l'endroit de la fenêtre où s'est produit l'évènement en utilisant les propriétés clientX et clientY de l'objet event. Ces propriétés contiennent la position horizontale et verticale du pointeur de la souris relativement au coin en haut à gauche de la fenêtre (ou du cadre).

La propriété target d'event contient l'élément où se trouvait la souris lors du déclenchement de l'évènement. Pour obtenir la position du pointeur par rapport à cet élément plutôt que par rapport à la fenêtre, vous pouvez soustraire la position de l'évènement de la position de l'évènement.

Chaque élément XUL dispose d'une propriété boxObject pouvant être utilisée pour récupérer la position et la taille de l'élément. L'objet de boîte contient deux propriétés x et y qui retournent la position de l'élément.

L'exemple ci-dessous a plusieurs éléments. Le déplacement de la souris affichera dans un libellé les coordonnées de la souris par rapport à la fenêtre et par rapport de l'élément survolé par la souris.

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="mousexy" title="Position de la souris"
        onmousemove="adjustCoords(event);"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<script>
function adjustCoords(event)
{
  var pos=document.getElementById("pos");

  // Utilisez les propriétés clientX et clientY pour obtenir
  // la position de la souris par rapport à la fenêtre. L'objet event
  // est passé à cette fonction en argument.
  var lbl="Sur la fenêtre: " + "(" + event.clientX + "," + event.clientY + ")";

  // Calcul la position de la souris survolant un élément.
  // Pour cela, soustraire la position de l'élément de la position de la souris.
  // La position de l'élément peut être déterminée grâce à son boxObject.
  var offsetX = (event.clientX - event.target.boxObject.x);
  var offsetY = (event.clientY - event.target.boxObject.y);

  // Assigner les offsets au texte du libellé.
  lbl+=" par rapport à: " + event.target.tagName + "(" + offsetX + "," + offsetY + ")";
  pos.setAttribute("value",lbl);
}
</script>

<label id="pos" value=" "/>

<hbox>
  <label value="Entrez du texte :"/><textbox/>
  <button label="OK"/>
</hbox>

<listbox>
  <listitem label="Document"/>
  <listitem label="Image"/>
  <listitem label="Vidéo"/>
  <listitem label="Audio"/>
</listbox>

</window>