JavaScript no tiene un objeto de mouse, y depende de un objeto de evento poderoso para obtener coordenadas del mouse.
Al escuchar el mousemove del documento, podemos obtener la posición del mouse en tiempo real.
¡pero! ! Hay demasiados atributos relacionados con el mouse en el evento, ¡lo cual es muy emocionante! como sigue:
| Event.layerx | Evento. Llayería |
| event.clientx | Event.Clienty |
| evento.pagex | evento.pagey |
| Event.OffSetX | Evento. Offsety |
| Event.Screenx | Event.Screeny |
| evento.x | evento.y |
¡Un total de 6 grupos!
Además, sus diferencias no son obvias, ¡y los navegadores no son compatibles!
El propósito de este artículo es aclarar sus diferencias y seleccionar las que no se recomiendan.
Código de prueba
Ejecute el siguiente código directamente:
La copia del código es la siguiente:
<! DOCTYPE HTML> <Br />
<html xmlns = "http://www.w3.org/1999/xhtml"> <br/>
<Head> <Br />
<meta charset = "utf-8" /> </p>
<estilo>
cuerpo {posición: relativo;}
div {min-height: 300px; Color de fondo: #EEE;}
#jg {correcto: 0; arriba: 10px; Posición: fijo; Color de fondo: #F00;}
</style>
<p> < /head> <r />
<body> <r />
<span id = "jg"> Mostrar resultados </span> <br />
<input type = "button" value = "A Botton" /> </p>
<div> div en la pantalla </div>
<div style = "altura: 1000px; ancho: 2000px; fondo: #ddd;"> muy alto y ancho. . . </div>
<VIV> Div SCREEN </div>
<p> </body> <r />
<script>
var jg = document.getElementById ('jg');
document.onmouseMove = function (e) {
E = E || Window.event;
jg.innerhtml = 'Layerx:'+E.Layerx+
', Cayery:'+E.Layery+
', <br/> Clientx:'+e.clientx+
', Clienty:'+E.Clienty+
', <br/> Pagex:'+E.Pagex+
', Pagey:'+E.Pagey+
', <br/> offsetX:'+e.offsetx+
', offsety:'+e.offsety+
', <br/> screenx:'+e.screenx+
', Screeny:'+E.Screeny+
', <br/> x:'+e.x+
', y:'+ey;
}
</script> <r />
</html>
Durante la prueba, encontré una herramienta mágica: Chrome (Google Chrome) e IE9 son compatibles con todos los atributos anteriores. Es muy conveniente compararlos.
Después de la comparación, los resultados son los siguientes:
Definición de cada atributo
ClientX e Y son las coordenadas del mouse en relación con la ventana del navegador (es decir, se ignora la parte fuera de la barra de desplazamiento); Todos los navegadores lo apoyan.
Screens e Y son las coordenadas del mouse en relación con el izquierdo (borde superior) de toda la pantalla, que está básicamente fuera de contacto con el documento; Es completamente compatible.
OffSetX e Y son las coordenadas del mouse en relación con el objeto que actualmente apuntan. Cuando el mouse apunta al botón en este momento, OffSetX es relativo a este botón; Firefox no es compatible
X e Y, Layerx e Y en el mismo navegador estándar, son atributos que se pueden usar para reemplazar la capa en IE.
Pagex e Y son las coordenadas del mouse en relación con el izquierdo (borde superior) de toda la página, incluso fuera de la ventana gráfica; IE7 y 8 no lo admiten.
Puntos clave: Layerx y Cayery
Layerx e Y son nuevos atributos lanzados por los navegadores estándar, y IE9 también los admite. Se puede usar en lugar de OffsetX e Y. Sin embargo, su definición es: las coordenadas del elemento con la información de posicionamiento en relación con el elemento de puntería actual. Este "posicionado" se refiere a un atributo CSS (es decir, no estático) que tiene posicionamiento no defectuoso.
Si el elemento puntiagudo actualmente se coloca, entonces Layerx e Y devolverán las coordenadas en relación con este elemento; De lo contrario, verifique la etiqueta principal de este elemento; Si todavía no hay posicionamiento, continúe; Hasta el elemento raíz - nodo HTML.
Por lo tanto, en Firefox, si desea compensar el valor, ¡debe agregar información de posición!
Resumen de compatibilidad:
1. Firefox no admite los atributos OffsetX, Offsety y X, Y, pero pueden ser reemplazados por Layerx;
2. X e Y en IE son equivalentes a la capa y las capas en Firefox & Chrome;
3. El límite del documento de IE7 y 8 está a 2 px del límite de la ventana del navegador, por lo que Screenx tiene una distancia mínima de 2px cuando se maximiza la ventana;
4. Aunque Layerx e Y en IE9 tienen valores, son inexplicablemente incorrectos. Parecen estar relacionados con la etiqueta HTML. Por ejemplo, en mi código de ejemplo, arrastre la barra de desplazamiento a la derecha, y el mouse se mueve lentamente del espacio en blanco al Big Div. En este momento, la diferencia entre la derecha y la derecha del primer DIV también se incluirá en Layerx. . . Como hay más y más elementos al final, más complicado es el cálculo; mientras que la capa de Firefox y Chrome no tiene este problema. Entonces, no use Layerx en IE9.
5. En Chrome, aunque X e Y tienen valores, ¡son exactamente lo mismo que Clientx e Y! Por lo tanto, no se recomienda usar los atributos X, Y.
Remedio de compatibilidad
En navegadores estándar, posición y event.layerx se puede usar para implementar el atributo event.offsetx;
No hay Pagex o Pagey en IE7. Solo puede usar document.documentelement.scrollleft+event.clientx para encontrarlo.
Por lo tanto, se puede eliminar uno de X, Y u OffsetX y Offsety en IE.