22 votos

¿Qué es una solución para Chrome para Android es incorrecto clientX y clientY comportamiento?

En Chrome para Android en versiones de 16 y 18 años (al menos) hay un error que informa de clientX y clientY incorrectamente. Si la página se desplaza los valores de clientX/Y será incorrecta por lo menos el touchstart evento, aunque no la click evento. Hay un error por aquí:

https://code.google.com/p/chromium/issues/detail?id=117754

Que contiene este ejemplo, que usted puede intentar usted mismo: http://www.apprisant.com/tab/cd.html

He hecho un ejemplo similar con lona aquí: http://codepen.io/simonsarris/full/dJcvn

Estos ejemplos de trabajo en otros navegadores móviles (incluyendo el viejo y simple Navegador de Android) pero Chrome para Android parece haber roto clientX/Y en (al menos algunos) eventos de toque cuando se desplaza.

Curiosamente, clientX y clientY no se rompen en la click evento como están en touchstart.

Mi pregunta es, ¿cuál es la mejor solución para obtener clientX y clientY trabajando consistentemente en todos los navegadores? Parece que compensar con window.scrollX y window.scrollY "resolver" el problema, pero es una buena solución necesita:

  1. Determinar que el navegador está afligido, o no, de preferencia sin hacer que el usuario haga nada y sin tener que recurrir a la comprobación de la userAgent (para no hacer ninguna suposición de determinadas versiones de los navegadores). En otras palabras, ¿cómo podemos decir que los navegadores tienen mala valores de clientX y clientY?
  2. Resolver el problema de forma fiable, y sólo en los navegadores, en donde se necesita de problemas (presumiblemente, sólo Chrome para Android y sólo versiones específicas de la misma, como de las futuras versiones puede estar bien), Aparentemente, la compensación por window.scrollX/Y es la única cosa que necesita hacer aquí.

11voto

Randy Hall Puntos 605

Simplemente use e.pageY - window.scrollY en lugar de e.clientY (o X, respectivamente).

e.pageY le dará donde ha ocurrido el evento, y de la deducción por window.scrollY "quitar el espacio en blanco" que está fuera de la pantalla debido a desplazarse. Usted PODRÍA condicional comprobar que e.pageY - window.scrollY === e.clientY, pero dado que la solución que se le da el valor correcto, y usted tiene que calcular a comprobar, de todos modos, lo que sería contrario a la intuición.

2voto

Randy Hall Puntos 605

Me gustaría empezar por la comprobación de que

<meta name="viewport" content="width=device-width, initial-scale=1">

es utilizado. Esto se ha corregido un MONTÓN de posición problemas en el navegador móvil de aplicaciones, particularmente con Android. No estoy seguro si iba a ayudar a su problema en particular, pero vale la pena un tiro.

0voto

Emil Ivanov Puntos 18594

Usted puede suscribirse para touchstart evento en el lienzo y el uso de la .offset() y e.pageX para obtener la posición en el lienzo.

$('#my-canvas').on('touchstart', function (startEvent) {
    var offset = $(this).offset();

    $(this).on('touchmove', function (moveEvent) {
        var pos = {
            x: moveEvent.pageX - offset.left,
            y: moveEvent.pageY - offset.top
        }
    });
});

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X