2012-10-03 34 views
57

En mi página de HTML 5, tengo un div con mousemove evento como sigue:HTML5 con jQuery - e.offsetX no está definido en Firefox

$('#canvas').mousemove(function(e){ 
    xpos = e.offsetX; 
    ypos = e.offsetY; 
    $('#mouse').html("X : " + xpos + " ; Y : " + ypos); 
}); 

Funciona bien con Google Chrome. Pero en Firefox, ambos dan el valor undefined. Lo he comprobado usando Firebug, es decir, he registrado el objeto e en la consola. Ambos offsetX y offsetY son undefined.

Cuando busqué en Google, había una solución diciendo que debería usar layerX y layerY, si ambos offsetX y offsetY no están definidos. Pero de Firebug, no pude encontrarlo. E incluso le había dado una oportunidad como esta:

xpos = (e.offsetX==undefined)?e.layerX:e.offsetX; 
ypos = (e.offsetY==undefined)?e.layerY:e.offsetY; 

Pero eso también está dando undefined como valores.

Estoy utilizando el jQuery más reciente - v1.8.2. Y estoy probando en mi Firefox v14.0.1

¿Alguna idea o sugerencia?


EDITAR

Gracias a dystroy y Vusan por ayudarme. La solución al problema anterior es el siguiente:

SOLUCIÓN

$('#canvas').mousemove(function(e){ 
    $('#cursor').show(); 
    if(e.offsetX==undefined) // this works for Firefox 
    { 
    xpos = e.pageX-$('#canvas').offset().left; 
    ypos = e.pageY-$('#canvas').offset().top; 
    }    
    else      // works in Google Chrome 
    { 
    xpos = e.offsetX; 
    ypos = e.offsetY; 
    } 
    $('#mouse').html("X : " + xpos + " ; Y : " + ypos); 
}); 
+0

no estoy seguro de qué versión de Google Chrome estaba usando, pero parece que también da un objeto indefinido en la versión Chrome v26. – cartbeforehorse

+0

@cartbeforehorse: Estoy usando la versión de Chrome 26.0.1410.64 m. Y funciona bien Véalo en vivo: http://jsfiddle.net/EEftW/ –

+1

Estoy seguro que me atrapó. Utilizando archivos de definición de jQuery de mecanografía y StronglyTyped, se me hizo creer que OffsetX/Y formaba parte de jquery. Nunca me di cuenta de que eran opcionales y solo se incluían en ciertos navegadores. Gracias por su publicación, me ayudó a encontrar el problema en un caos de código. – fabspro

Respuesta

19

Intente utilizar layerX y layerY para Firefox y offsetX de otro navegador.

Si el acontecimiento que disparó con jQuery:

xpos = e.offsetX === undefined ? e.originalEvent.layerX : e.offsetX; 
ypos = e.offsetY === undefined ? e.originalEvent.layerY : e.offsetY; 

Si el acontecimiento que disparó con javascript:

xpos = e.offsetX==undefined?e.layerX:e.offsetX; 
ypos = e.offsetY==undefined?e.layerY:e.offsetY; 
+2

Gracias .. Pero lo que quería es relativo a un contenedor ('# canvas'). pageX/Y son relativos al elemento '' - http://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-pagex-y –

+8

Use ' var xInCanvas = e.pageX- $ canvas.offset(). left; ' –

+4

Gracias chicos. Lo hice funcionar cuando probé lo que @dystroy había sugerido. El código es el siguiente: 'si (== e.offsetX indefinido) \t \t \t \t { \t \t \t \t \t xpos = e.pageX - $ ('# lienzo') de desplazamiento() izquierdo;.. \t \t \t \t \t ypos = e.pageY - $ ('# canvas'). Offset(). Top; \t \t \t \t} \t \t \t \t \t \t \t \t otro \t \t \t \t { \t \t \t \t \t xpos = e.offsetX; \t \t \t \t \t ypos = e.offsetY; \t \t \t \t} ' Gracias chicos :) –

14

Usted no encontró ellas porque está en el originalEvent. intento: e.originalEvent.layerX e.originalEvent.layerY

Sobre el pageX y pageY no están calculando la misma cosa. layerX es la izquierda del objeto del primer pariente relativo/absoluto. pageX es la izquierda del objeto de la página.

19

Use layerX y layerY en FF y offsetX y offsetY en todos los demás navegadores.

$('#canvas').mousemove(function(e){ 
    xpos = e.offsetX === undefined ? e.originalEvent.layerX : e.offsetX; 
    ypos = e.offsetY === undefined ? e.originalEvent.layerY : e.offsetY; 

    $('#mouse').html("X : " + xpos + " ; Y : " + ypos); 
}); 
+1

Esta y la otra respuesta que especifica el evento original necesitan más votos ascendentes. La "mejor respuesta" proporciona una solución, pero estos son más precisos ya que layerX y layerY son más equivalentes a offsetX y offsetY. Gracias :) –

0

Esto funciona bien en firefox y otros.

var offsetRequired = (e.offsetX || e.pageX - $(e.target).offset().left); 
0

Firefox realidad hace supportMouseEvent.offsetX y MouseEvent.offsetY después de la liberación 39.0, que se libera en july 2015.

+0

Pero los valores de offsetX/Y en Firefox no son los mismos que en Chrome. Necesita convertirlos pero no sabe cómo. – scott

+0

Obtengo los mismos valores con la última versión de ambos navegadores. –

+0

Tengo Chrome 49 porque mi Mac OS es 10.6.8. No puedo usar una versión más nueva de Chrome hasta que actualice mi sistema operativo (o mi jefe me compra una máquina nueva). – scott