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

— romain
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

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

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
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
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
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
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
source