Usando jQuery cómo obtener coordenadas de clic en el elemento de destino

109

Tengo el siguiente controlador de eventos para mi elemento html

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

Necesito encontrar la posición del mouse en la barra de búsqueda # en el momento de hacer clic. Hubiera pensado que el código anterior debería funcionar, pero da un resultado incorrecto

— romano
fuente

4

¿Posición relativa al elemento, la ventana gráfica o todo el documento?

— James

Lo hice funcionar usando e.layerX - e.target.offsetLeft y para Oprea solo usé e.offsetX

— Roman

si desea obtenerlo en un sitio receptivo. pruebe este artículo, también puede obtenerlo en sitios receptivos. kvcodes.com/2014/03/…

— Kvvaradha

235

¿Está tratando de obtener la posición del puntero del mouse relativeen el elemento (o) simplemente en la ubicación del puntero del mouse?

Pruebe esta demostración: http://jsfiddle.net/AMsK9/

Editar:

1) event.pageX, event.pageYle da el documento relativo a la posición del mouse.

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

2) offset(): Da la posición de desplazamiento de un elemento.

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

3) position(): le da la posición relativa de un elemento, es decir,

considere que un elemento está incrustado dentro de otro elemento

ejemplo :

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

9

+1 para los ejemplos ... una nota, aunque también agregaría el código aquí, si su enlace muere, esta pregunta se vuelve inútil en el futuro, pondría el código para cada uno y una breve descripción aquí :)

— Nick Craver

2

Hay una forma más sencilla de hacer el caso de '#B': e.offsetXy e.offsetY. Supongo que te gustaría editarlo. Ya actualicé el violín aquí . Encontré esta solución gracias a la publicación, así que gracias.

— toto_tico

Gracias, porque personalmente confundí con offset () y position (), si alguien necesita más aclaraciones, puede leer stackoverflow.com/questions/3202008/… por conveniencia

— simongcc

Tenía un elemento fijo en la parte inferior, que tenía un ancho del 100%, así que usé el ancho de la ventana como posX en su lugar, así que pude determinar si un usuario estaba haciendo clic en una "X" que se hizo con una: después de la regla css que estaba en la esquina superior derecha.

— amurrell

Gran ejemplo, pero no es obvio cuál es la diferencia entre .position () y .offset (). Debe envolver el elemento #C en algún div padre con una posición ejemplar para ver que el clic en #C devuelve la posición del mouse dentro del elemento que es padre de #C, que probablemente sea menos útil.

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

3

Prueba esto:

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

Aquí puede encontrar más información con DEMO

— Krunal
fuente

1

En porcentaje:

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

1

Si MouseEvent.offsetX es compatible con su navegador (todos los navegadores principales lo admiten), el objeto de evento jQuery contendrá esta propiedad.

La propiedad de solo lectura MouseEvent.offsetX proporciona el desplazamiento en la coordenada X del puntero del mouse entre ese evento y el borde de relleno del nodo de destino.

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

— Memet Olsen
fuente

0

ver aquí ingrese la descripción del enlace aquí

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
fuente