Comment obtenir des coordonnées de clic précises par rapport à un élément cible dans jQuery ?

Trouver les coordonnées d'un clic sur un élément cible à l'aide de jQuery

Afin d'obtenir la position précise d'un clic de souris sur un élément cible spécifique, vous Vous pouvez envisager d'utiliser soit les propriétés pageX et pageY pour déterminer la position par rapport à l'ensemble du document, soit la méthode offset() pour établir la position relative dans l'élément spécifique.

Cependant, si vous avez besoin de la position relative dans le parent de l'élément ou un autre élément contenant, vous pouvez utiliser la méthode position(). Voici un exemple illustrant l'utilisation de ces méthodes :

$('#element').on('click', function(e) {
  // Determining position relative to document using pageX and pageY:
  var clickX = e.pageX;
  var clickY = e.pageY;

  // Determining position relative to element using offset():
  var offsetX = $(this).offset().left;
  var offsetY = $(this).offset().top;
  var relativeClickX = e.pageX - offsetX;
  var relativeClickY = e.pageY - offsetY;

  // Determining position relative to parent using position():
  var positionX = $(this).position().left;
  var positionY = $(this).position().top;
  var parentRelativeClickX = e.pageX - positionX;
  var parentRelativeClickY = e.pageY - positionY;
});

Dans le cas de votre code :

jQuery("#seek-bar").click(function(e){
    var x = e.pageX - e.target.offsetLeft;
    alert(x);    
});

Votre intention est de récupérer la position du curseur de la souris par rapport au # élément de barre de recherche en cliquant. Toutefois, la soustraction de e.target.offsetLeft est incorrecte car la propriété offsetLeft renvoie la position de l'élément par rapport à son parent. Au lieu de cela, vous devez utiliser directement e.pageX, qui fournit la coordonnée x par rapport au document.

Référez-vous à la démonstration de code fournie pour une élaboration plus détaillée.

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!