Maison >interface Web >tutoriel CSS >Comment obtenir des coordonnées précises d'un clic de souris par rapport à un élément cible à l'aide de jQuery ?
Comment obtenir des coordonnées précises d'un clic de souris par rapport à un élément cible à l'aide de jQuery ?
- Mary-Kate Olsenoriginal
- 2024-12-05 22:51:14637parcourir
Comprendre les coordonnées des clics de souris sur les éléments cibles à l'aide de jQuery
Lors de la gestion des événements de clic sur les éléments HTML avec jQuery, il est essentiel de savoir comment récupérer avec précision les coordonnées de la souris pointeur par rapport à l’élément cible. Explorons et clarifions ce sujet avec des exemples détaillés.
Diagnostic du problème
Considérons le gestionnaire d'événements suivant :
jQuery("#seek-bar").click(function(e){
var x = e.pageX - e.target.offsetLeft;
alert(x);
});
L'objectif est d'obtenir la position du pointeur de la souris par rapport à l'élément #seek-bar au moment du clic. Cependant, le code fourni peut donner des résultats incorrects.
Comprendre les propriétés de position
1. event.pageX, event.pageY :
Ces propriétés fournissent les coordonnées du pointeur de la souris par rapport à l'ensemble du document.
Ref : http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/
2. offset() :
Cette fonction renvoie la position de décalage (distance par rapport au coin supérieur gauche de la page) d'un élément dans son document qui le contient.
Ref : http://api.jquery.com/offset/
3. position() :
Cette fonction renvoie la position de l'élément (par rapport à son élément parent) dans son document contenant.
Réf : http://api .jquery.com/position/
Pour résoudre le problème initial, il est crucial de prendre en compte ces propriétés de position et leur utilisation prévue. Dans ce cas, pour obtenir la position du pointeur de la souris par rapport à la #seek-bar, nous devons utiliser la fonction offset() au lieu de offsetLeft.
Code corrigé :
jQuery("#seek-bar").click(function(e){
var x = e.pageX - $(this).offset().left;
alert(x);
});
Exemple Démonstration
Pour illustrer la différence entre ces propriétés de position, voici un exemple d'extrait HTML et le code JavaScript correspondant :
HTML
<body> <div>
JavaScript
$(document).ready(function (e) {
$('#A').click(function (e) { //Default mouse Position
alert(e.pageX + ' , ' + e.pageY);
});
$('#B').click(function (e) { //Offset mouse Position
var posX = $(this).offset().left,
posY = $(this).offset().top;
alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
});
$('#C').click(function (e) { //Relative ( to its parent) mouse position
var posX = $(this).position().left,
posY = $(this).position().top;
alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
});
});
En cliquant sur ces divs, vous pouvez observez les résultats distincts en fonction de la propriété de position utilisé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!