Utilizzando jQuery come ottenere le coordinate dei clic sull'elemento di destinazione

109

Ho il seguente gestore di eventi per il mio elemento html

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

Ho bisogno di trovare la posizione del mouse sulla barra di ricerca # al momento del clic. Avrei pensato che il codice sopra dovrebbe funzionare, ma dà risultati errati

— romano
fonte

4

Posizione relativa all'elemento, al viewport o all'intero documento?

— James

L'ho fatto funzionare usando e.layerX - e.target.offsetLeft e per Oprea ho appena usato e.offsetX

— Roman

se desideri scaricarlo su un sito reattivo. prova questo articolo, puoi scaricarlo anche su siti reattivi. kvcodes.com/2014/03/…

— Kvvaradha

235

Stai cercando di ottenere la posizione del puntatore del mouse relativesull'elemento (o) semplicemente la posizione del puntatore del mouse

Prova questa demo: http://jsfiddle.net/AMsK9/

Modificare :

1) event.pageX, event.pageYti dà il documento relativo alla posizione del mouse!

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

2) offset(): Fornisce la posizione di offset di un elemento

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

3) position() : ti dà la posizione relativa di un elemento, cioè

considera che un elemento è incorporato all'interno di un altro elemento

esempio :

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

Rif : 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 per gli esempi ... una nota anche se aggiungerei il codice qui, se il tuo link muore questa domanda diventa inutile in futuro, metterei il codice per ciascuno e una breve descrizione qui :)

— Nick Craver

2

C'è un modo più semplice per fare il caso di '#B': e.offsetXe e.offsetY. Immagino che desideri modificarlo. Ho già aggiornato il violino qui . Ho trovato questa soluzione grazie al post, quindi grazie.

— toto_tico

Grazie, perché personalmente ho confuso offset () e position (), per chiunque abbia bisogno di ulteriori chiarimenti può leggere stackoverflow.com/questions/3202008/… per comodità

— simongcc

Avevo un elemento fissato in basso - che era il 100% di larghezza, quindi ho usato invece la larghezza della finestra come posX - Quindi sono stato in grado di determinare se un utente stava facendo clic su una "X" che era stata creata con una regola: after css che era nell'angolo in alto a destra.

— amurrell

Ottimo esempio, ma non è ovvio quale sia la differenza tra .position () e .offset (). Dovresti racchiudere l'elemento #C in un div genitore con una posizione esemplare per vedere che il clic su #C restituisce la posizione del mouse all'interno dell'elemento che è genitore di #C, che probabilmente è meno utile di frequente.

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

3

Prova questo:

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

Qui puoi trovare maggiori informazioni con DEMO

— Krunal
fonte

1

In percentuale:

$('.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
fonte

1

Se MouseEvent.offsetX è supportato dal tuo browser (tutti i principali browser lo supportano effettivamente), l' oggetto jQuery Event conterrà questa proprietà.

La proprietà di sola lettura MouseEvent.offsetX fornisce l'offset nella coordinata X del puntatore del mouse tra quell'evento e il bordo di riempimento del nodo di destinazione.

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

— Memet Olsen
fonte

0

vedi qui inserisci la descrizione del link qui

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
fonte