Utilisation de jQuery comment obtenir des coordonnées de clic sur l'élément cible

109

J'ai le gestionnaire d'événements suivant pour mon élément html

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

J'ai besoin de trouver la position de la souris sur la # barre de recherche au moment du clic. J'aurais pensé que le code ci-dessus devrait fonctionner, mais il donne un résultat incorrect

javascript jquery html css jquery-ui romain
la source
4
Position par rapport à l'élément, à la fenêtre ou à l'ensemble du document?
James
Je l'ai fait fonctionner en utilisant e.layerX - e.target.offsetLeft et pour Oprea juste utilisé e.offsetX
Roman
si vous souhaitez l'obtenir sur un site responsive. essayez cet article, vous pouvez également l'obtenir sur des sites réactifs. kvcodes.com/2014/03/…
Kvvaradha

Réponses:

235

Essayez-vous d'obtenir la position du pointeur de la souris relativesur l'élément (ou) simplement l'emplacement du pointeur de la souris

Essayez cette démo: http://jsfiddle.net/AMsK9/

Éditer :

1) event.pageX, event.pageYvous donne le document relatif à la position de la souris!

Réf : http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/

2) offset(): Il donne la position de décalage d'un élément

Réf : http://api.jquery.com/offset/

3) position(): Il vous donne la position relative d'un élément c'est-à-dire,

considérer qu'un élément est intégré dans un autre élément

exemple :

<div id="imParent">
   <div id="imchild" />
</div>

Réf : http://api.jquery.com/position/

HTML

<body>
   <div id="A" style="left:100px;"> Default    <br /> mouse<br/>position </div>
   <div id="B" style="left:300px;"> offset()   <br /> mouse<br/>position </div>
   <div id="C" style="left:500px;"> position() <br /> mouse<br/>position </div>
</body>

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

la source
9
+1 pour les exemples ... une note mais j'ajouterais également le code ici, si votre lien meurt cette question devient inutile à l'avenir, je mettrais le code pour chacun et une brève description ici :)
Nick Craver
2
Il existe une manière plus simple de traiter le cas de '#B': e.offsetXet e.offsetY. Je suppose que vous aimeriez le modifier. J'ai déjà mis à jour le violon ici . J'ai trouvé cette solution grâce à la publication, alors merci.
toto_tico
Merci, parce que j'ai personnellement confondu avec offset () et position (), pour quiconque a besoin de plus amples éclaircissements peut lire stackoverflow.com/questions/3202008/... pour des raisons de commodité
simongcc
J'avais un élément fixé en bas - c'était une largeur de 100%, donc j'ai utilisé la largeur de la fenêtre comme posX à la place - J'ai donc pu déterminer si un utilisateur cliquait sur un "X" créé avec une règle: after css qui était dans le coin supérieur droit.
amurrell
Excellent exemple, mais il n'est pas évident de savoir quelle est la différence entre .position () et .offset (). Vous devriez envelopper l'élément #C dans un div parent avec une position exemplaire pour voir que le clic sur #C renvoie la position de votre souris à l'intérieur de l'élément parent de #C, ce qui est probablement le moins souvent utile.
amik
15 
$('#something').click(function (e){
    var elm = $(this);
    var xPos = e.pageX - elm.offset().left;
    var yPos = e.pageY - elm.offset().top;

    console.log(xPos, yPos);
});
Nisar
la source
3

Essaye ça:

jQuery(document).ready(function(){
   $("#special").click(function(e){
      $('#status2').html(e.pageX +', '+ e.pageY);
   }); 
})

Ici vous pouvez trouver plus d' informations avec DEMO

Krunal
la source
1

En pourcentage:

$('.your-class').click(function (e){
    var $this = $(this); // or use $(e.target) in some cases;
    var offset = $this.offset();
    var width = $this.width();
    var height = $this.height();
    var posX = offset.left;
    var posY = offset.top;
    var x = e.pageX-posX;
        x = parseInt(x/width*100,10);
        x = x<0?0:x;
        x = x>100?100:x;
    var y = e.pageY-posY;
        y = parseInt(y/height*100,10);
        y = y<0?0:y;
        y = y>100?100:y;
    console.log(x+'% '+y+'%');
});
l2aelba
la source
1

Si MouseEvent.offsetX est pris en charge par votre navigateur (tous les principaux navigateurs le prennent en charge), l' objet jQuery Event contiendra cette propriété.

La propriété en lecture seule MouseEvent.offsetX fournit le décalage dans la coordonnée X du pointeur de la souris entre cet événement et le bord de remplissage du nœud cible.

$("#seek-bar").click(function(event) {
  var x = event.offsetX
  alert(x);    
});
Memet Olsen
la source
0

voir ici entrez la description du lien ici

html

<body>
<p>This is a paragraph.</p>
<div id="myPosition">
</div>
</body>

css

#myPosition{
  background-color:red;
  height:200px;
  width:200px;
}

jquery

$(document).ready(function(){
    $("#myPosition").click(function(e){
       var elm = $(this);
       var xPos = e.pageX - elm.offset().left;
       var yPos = e.pageY - elm.offset().top;
       alert("X position: " + xPos + ", Y position: " + yPos);
    });
});
AirBlack
la source