Comment obtenir avec précision les coordonnées de clic par rapport à un élément dans jQuery ?

Obtention des coordonnées de clic sur l'élément cible avec jQuery

Lors de la gestion des événements de clic sur des éléments HTML à l'aide de jQuery, on peut rencontrer des résultats incorrects en essayant de trouver la position de la souris par rapport à l'élément. Cela pourrait être dû à une mauvaise compréhension des méthodes jQuery disponibles.

event.pageX et event.pageY

Ces propriétés fournissent la position de la souris par rapport au document. Ils ne sont pas spécifiques à l'élément cible.

offset()

Cette méthode donne la position de décalage d'un élément par rapport à son parent. Elle est couramment utilisée pour déterminer la position de l'élément sur la page, mais elle ne donne pas la position de la souris par rapport à l'élément lui-même.

position()

Contrairement à offset(), cette méthode donne la position relative d'un élément par rapport à son parent immédiat. Il est utile pour obtenir la position d'un élément à l'intérieur d'un conteneur interne.

Exemple

Pour démontrer la différence entre ces méthodes, considérons le code HTML suivant :

<div>

Et le gestionnaire d'événements JavaScript suivant :

jQuery("#seek-bar").click(function(e) {
  // Incorrectly uses offset()
  var x = e.pageX - jQuery(this).offset().left;
  console.log(x);

  // Correctly uses position()
  var x = e.pageX - jQuery(this).position().left;
  console.log(x);
});

En cliquant sur la barre de recherche #seek, vous remarquerez que le premier journal de la console produit des résultats incorrects car il utilise offset(), qui donne la position absolue de l'élément sur la page. Cependant, le deuxième journal de la console fournit la position correcte de la souris par rapport à l'élément en utilisant position().

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!