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

Détermination des coordonnées de clic sur l'élément cible à l'aide de jQuery

Pour capturer les coordonnées de la souris par rapport à l'élément cible lors d'un clic, jQuery propose plusieurs méthodes pour obtenir des résultats précis.

event.pageX et event.pageY

Les propriétés event.pageX et event.pageY fournissent le pointeur de la souris emplacement par rapport au document.

Element.offset()

La méthode offset() récupère la position de décalage de l'élément dans le document.

Element.position()

La méthode position() détermine la position relative d'un élément au sein de son parent conteneur.

Démonstration

Considérez le code JavaScript suivant :

jQuery("#seek-bar").click(function(e) {
    var posX = e.pageX - $(this).offset().left;
    var posY = e.pageY - $(this).offset().top;
    alert("X-coordinate: " + posX + "\nY-coordinate: " + posY);
});

Ce code calculera et affichera les coordonnées précises du clic par rapport à l'élément cible.

Exemple HTML

<div>

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!