javascript - una - Usando jQuery cómo obtener coordenadas de clic en el elemento de destino
obtener la posicion de un elemento javascript (6)
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 al momento de hacer clic. Hubiera pensado que el código anterior debería funcionar, pero da un resultado incorrecto
¿Está tratando de obtener la posición del puntero del mouse relative al elemento (o) simplemente la ubicación del puntero del mouse?
Pruebe esta demostración: http://jsfiddle.net/AMsK9/
Editar:
1) event.pageX , event.pageY te 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() : te da la posición relativa de un elemento, es decir,
considerar 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));
});
});
Prueba esto:
jQuery(document).ready(function(){
$("#special").click(function(e){
$(''#status2'').html(e.pageX +'', ''+ e.pageY);
});
})
Aquí puedes encontrar más http://api.jquery.com/event.pageX/ con DEMO
Si MouseEvent.offsetX es supported con su navegador (todos los principales navegadores lo admiten), el objeto 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);
});
mira aquí ingresa 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);
});
});
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+''%'');
});
$(''#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);
});