Какое обходное решение для Chrome для Android неправильного поведения clientX и customerY?

В Chrome для Android версии 16 и 18 (по крайней мере) есть ошибка, которая сообщает об ошибках clientX и clientY неправильно. Если страница прокручивается, значения clientX/Y будут ошибочными, по крайней мере, для события touchstart, но не для события click. Здесь есть ошибка:

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

В этом примере вы можете попробовать: http://www.apprisant.com/tab/cd.html

Я сделал аналогичный пример с холстом здесь: http://codepen.io/simonsarris/full/dJcvn

Эти примеры работают с другими мобильными браузерами (включая обычный старый Android-браузер), но Chrome для Android, похоже, сломал clientX/Y на (по крайней мере, некоторых) событиях при прокрутке.

Интересно, что clientX и clientY не разбиваются на событие click, как на touchstart.

Мой вопрос заключается в том, что наилучшим способом решения проблемы с клиентом и клиентом я работаю последовательно в браузерах? Похоже, что смещение с помощью window.scrollX и window.scrollY "решит" проблему, но хорошее обходной путь:

  • Определите, что браузер страдает или нет, предпочтительно, не делая пользователя ничего и не прибегая к проверке userAgent (поэтому не делайте никаких предположений о конкретных версиях браузера). Другими словами, , как определить, какие браузеры имеют плохие значения для clientX и clientY?
  • Решите проблему надежно и только в тех браузерах, где она нуждается в решении (предположительно, только для Chrome для Android и только для определенных версий, поскольку будущие версии могут быть точными). По-видимому, смещение window.scrollX/Y - единственное, что необходимо сделать здесь.

Ответы

Ответ 1

Просто используйте e.pageY - window.scrollY вместо e.clientY (или X, соответственно).

e.pageY предоставит вам, где произошло событие, и смещение window.scrollY будет "удалять пустое пространство", которое отключено из-за прокрутки. Вы МОЖЕТЕ условно проверить, что e.pageY - window.scrollY === e.clientY, но так как обходной путь дает вам правильное значение, и вы должны его вычислить, чтобы проверить его в любом случае, это было бы противоинтуитивно.

Ответ 2

Я бы начал с проверки того, что

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

. Это зафиксировало много позиционных проблем в мобильных браузерах, особенно с Android. Не уверен, что это поможет вашей конкретной проблеме, но стоит сделать снимок.

Ответ 3

Вы можете подписаться на событие touchstart на холсте и использовать .offset() и e.pageX, чтобы получить позицию в холсте.

$('#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
        }
    });
});