Comment obtenir des coordonnées précises d'un clic de souris par rapport à un élément cible à l'aide de jQuery ?-tutoriel CSS-php.cn

Comment obtenir des coordonnées précises d'un clic de souris par rapport à un élément cible à l'aide de jQuery ?

Mary-Kate Olsen

Libérer： 2024-12-05 22:51:14

original

695 Les gens l'ont consulté

How to Get Accurate Mouse Click Coordinates Relative to a Target Element Using jQuery?

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); 
});

Copier après la connexion

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); 
});

Copier après la connexion

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>

Copier après la connexion

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));
    });
});

Copier après la connexion

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!