Comment obtenir la position de la souris par rapport à un élément en JavaScript ?

Obtention de la position de la souris par rapport à un élément

Obtenir la position de la souris par rapport à un élément spécifique est crucial pour les applications interactives telles que la peinture sur toile applications. Pour y parvenir, nous pouvons utiliser la méthode getBoundingClientRect().

Considérez l'extrait de code JavaScript suivant :

<code class="javascript">document.getElementById('clickme').onclick = function(e) {
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left; //x position within the element.
  var y = e.clientY - rect.top;  //y position within the element.
  console.log("Left? : " + x + " ; Top? : " + y + ".");
};</code>

Dans cet exemple, nous attachons un événement onclick à un élément avec l'ID "Clique-moi." Lorsque vous cliquez dessus, le gestionnaire d'événements récupère le rectangle englobant de l'élément cliqué à l'aide de getBoundingClientRect(). Ce rectangle représente la position et les dimensions de l'élément à l'écran.

Pour calculer la position de la souris par rapport à l'élément, nous soustrayons les coordonnées gauche et supérieure du rectangle englobant des propriétés clientX et clientY de l'événement click. Cela nous donne x et y, qui représentent la position de la souris dans l'élément cliqué.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!