web-dev-qa-db-fra.com

Utilisation de jQuery pour obtenir les coordonnées de clic sur l'élément cible

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

Je dois 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 

javascriptjqueryhtmlcssjquery-ui
100
Roman

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

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

Modifier :

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

Ref: http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/

2) offset(): Donne la position décalée d'un élément

Ref: http://api.jquery.com/offset/

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

considérer un élément est intégré à un autre élément 

Exemple : 

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

Ref: 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));
    });
});
219
user372551
$('#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);
});
13
Nisar

Essaye ça:

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

Ici vous pouvez trouver plus info avec DEMO

3
Krunal

Si MouseEvent.offsetX est pris en charge par votre navigateur (tous les principaux navigateurs le supportent actuellement), jQuery Objet événement 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 noeud cible.

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

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+'%');
});
1
l2aelba

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