107 votes

À l'aide de jQuery comment obtenir cliquez sur coordonnées sur l'élément cible

J'ai le gestionnaire d'événement 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 #recherche-bar au moment du clic. J'aurais pensé que le code ci-dessus devrait fonctionner, mais il donne un résultat incorrect

229voto

Avinash Points 7561

Êtes-vous essayer d'obtenir la position du pointeur de la souris relative à l'élément ( ou les ) simplement le pointeur de la souris emplacement

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


Edit :

1) event.pageX, event.pageY vous donne la position de la souris par rapport document !

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

2) offset() : Il donne le décalage de la position 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érons un élément est incorporé à l'intérieur d'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));
    });
});

3voto

Krunal Points 2932

Essayez ceci:

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

Ici vous pouvez trouver plus d' info avec la DÉMO

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X