Comment obtenir correctement les coordonnées de clic par rapport à un élément cible dans jQuery ?

Identification des coordonnées de clic sur un élément cible dans jQuery

Pour déterminer la position du pointeur de la souris sur un élément HTML spécifié lors d'un clic, nous pouvons exploitez le gestionnaire d’événements jQuery. Cependant, un problème récent a été rencontré où des résultats incorrects étaient renvoyés.

Correction des résultats de positionnement incorrects

Le code initial fourni tentait de calculer les coordonnées du clic par rapport au élément cible à l’aide des propriétés event.pageX et event.target.offsetLeft. Cependant, il a été découvert que cette méthode ne fournit pas de résultats précis.

Comprendre les coordonnées d'un événement

Il est important de distinguer deux types de coordonnées du pointeur de la souris :

• Par rapport au document : Obtenu à l'aide de event.pageX et event.pageY, qui fournir la position du pointeur par rapport à l'ensemble du document.
• Par rapport à l'élément : nécessite l'utilisation de la méthode offset() pour déterminer la position de l'élément dans le document, suivie de la soustraction des valeurs de décalage de les coordonnées du pointeur.

Position() vs Offset()

Dans ce contexte, la méthode position() n'est pas appropriée car elle calcule la position de l'élément par rapport à son conteneur parent, ce qui n'est pas pertinent dans ce scénario. La méthode offset(), quant à elle, fournit la position de l'élément par rapport au document, ce qui nous permet de calculer avec précision les coordonnées du clic.

Code amélioré

Pour résoudre le problème, le code a été révisé pour déterminer correctement les coordonnées du clic par rapport à l'élément cible :

jQuery("#seek-bar").click(function(e){
    var offset = $(this).offset();
    var x = e.pageX - offset.left;
    var y = e.pageY - offset.top;
    alert(x + ", " + y); 
});

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!