Javascript ontouchstart / move / end - получение странных результатов - PullRequest
Новая
       13

Javascript ontouchstart / move / end - получение странных результатов

3 голосов
/ 02 марта 2012

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

Следующий код должен был предупредить что-то вроде: «start.move.move.move.end» после того, как я провел пальцем (количество «ходов» определяется тем, как долго длится действие) . 

        itemWrap[0].ontouchstart = function(e) {
            _self.msg.push("start");

        }

        itemWrap[0].ontouchmove = function(e) {
            _self.msg.push("move");
        }

        itemWrap[0].ontouchend = function(e) {
            _self.msg.push("end");

            // join messages and alert to browser
            msg = _self.msg.join(".") || "empty";
            alert(msg);
        }

Тем не менее, я получаю очень странные оповещения, и они довольно сильно различаются на устройствах Android / iOS. На Android результаты выглядят ожидаемыми в большинстве случаев:

"start.move.move.move.move.end"

"start.end" (при простом нажатии на экран)

"start.move.start.end" (это происходит при любом другом действии касания)

Но на iPad я получаю действительно странные результаты. При первом касании я получаю именно то, что ожидаю, но при втором касании предупреждение, содержащее результаты («start.move.move.move.end»), срабатывает сразу после касания экрана и всегда содержит предыдущие результаты. Когда я в третий раз касаюсь экрана, он снова возвращается к обычному режиму работы, поэтому он выполняет все остальные действия касания.

Я искал кого-то с похожей проблемой, но ближе всего я вижу пользователей, имеющих проблемы с мультитач-действиями (которые меня не интересуют). Любые предложения относительно того, почему это происходит?

1 Ответ

4 голосов
/ 11 сентября 2013

Вы должны помнить, что касание - это мультитач, и оно не похоже на событие мыши, которое всегда одно. Каждый раз, когда вы получаете сенсорное событие (touchstart, touchstart, touchend), вы также получаете идентификатор 

itemWrap[0].ontouchstart = function(e) {
    // e.touches.length - number of touches
    // e.touches[e.touches.length - 1].identifier - last touch is the last one on the list
    // e.touches[e.touches.length - 1].pageX and .pageY - place of the touch
    _self.msg.push("start");
}

Поэтому, когда вы делаете касание и касание, вы должны проверить этот идентификатор, чтобы увидеть, какое касание было перемещено или закончено. Вы можете сделать это, сохранив эти данные в touchstart: 

var t = {pageX:event.touches[index].pageX, pageY:event.touches[index].pageY, identifier:event.touches[index].identifier};
touches.push(t);

А затем найдите правильный штрих в касании с помощью 

event.changedTouches[0].identifier

здесь вам не нужно проходить этот список, потому что он всегда один, но вы должны сравнить этот идентификатор с теми, которые вы сохранили в списке.

Надеюсь, это поможет.

...