Каков обходной путь для Chrome для неправильного поведения клиента ClientX и клиента?

В 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 «решит» проблему, но для ее обходного пути необходимо:

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

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

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

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

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

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

Вы можете подписаться на событие 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 } }); }); 
Intereting Posts
Преобразование JSON в объект Java с использованием Gson Как получить представление из координат X / Y Фрагмент customAnimation не работает в Lollipop Нужно получить время в 24-часовом формате при добавлении времени Как реализовать более двух уровней навигации в com.android.support :leanback-v17 Espresso – утверждение TextView с асинхронными загруженными данными ActionBarSherlock – вкладки, отображающие верхнюю панель действий с пользовательским представлением Видео-просмотр поворачивается на 90 градусов в Android Программно использовать setTextSize для? Attr / textAppearanceLarge Что я могу использовать, чтобы приложение Android могло взаимодействовать с приложением rails Обновление бесплатных платных приложений для Android без оставления двух значков Как обнаружены рефералы Android Как динамически установить высоту текста и андроида Отображение полосы выполнения во время сетевого вызова Отображение пользовательского вида в swiped RecyclerView item