Включает сенсорную прокрутку клиента X / Y или нет? - PullRequest
Новая
       13

Включает сенсорную прокрутку клиента X / Y или нет?

10 голосов
/ 04 мая 2011

Я пытаюсь получить координаты касания относительно области просмотра браузера из событий касания (например, touchstart ). Я пытался получить их из свойств clientX / Y, но оба на самом деле возвращают значения, включая прокрутку.

Это против спецификации, так как он говорит, что clientX / Y должен возвращать координаты без прокрутки.

  • Я попытался добавить / удалить мета-тег viewport - безуспешно.
  • Я тестировал его в iOS 4.3 на iPhone и Fennec по ночам - оба возвращали значения при прокрутке.

Что я делаю не так?

Спасибо

Ответы [ 2 ]

15 голосов
/ 03 октября 2012

Вы не делаете ничего плохого.Это ошибка в старых версиях webkit, которая возникает при прокрутке страницы.Я видел эту ошибку в iOS4 и другую ошибку в Android 4.0.

Я нашел способ обнаружить ошибки и вычислить правильные значения.Надеюсь, что это может быть полезно для других: 

function fixTouch (touch) {
    var winPageX = window.pageXOffset,
        winPageY = window.pageYOffset,
        x = touch.clientX,
        y = touch.clientY;

    if (touch.pageY === 0 && Math.floor(y) > Math.floor(touch.pageY) ||
        touch.pageX === 0 && Math.floor(x) > Math.floor(touch.pageX)) {
        // iOS4 clientX/clientY have the value that should have been
        // in pageX/pageY. While pageX/page/ have the value 0
        x = x - winPageX;
        y = y - winPageY;
    } else if (y < (touch.pageY - winPageY) || x < (touch.pageX - winPageX) ) {
        // Some Android browsers have totally bogus values for clientX/Y
        // when scrolling/zooming a page. Detectable since clientX/clientY
        // should never be smaller than pageX/pageY minus page scroll
        x = touch.pageX - winPageX;
        y = touch.pageY - winPageY;
    }

    return {
        clientX:    x,
        clientY:    y
    };
}

Эта функция должна вызываться для каждого прикосновения в массиве event.touches.

8 голосов
/ 04 мая 2011

Попробуйте это 

event.touches[0].pageX

Обратите внимание, что это всегда event.touches, даже если вы определяете свое событие таким образом (используя здесь jquery) 

$("body").bind('touchmove', function(e){ 
//stops normal scrolling with touch
e.preventDefault();

console.log(event.touches[0].pageX)

})

;

Руководство по Safari предоставляет более подробную информацию

...