Не работает код из примера из статьи со хабра, в чем ошибка, или это только у меня?

Question

[krll-k]

Код из примера с хабра тырк:

var touchstartX = 0;
var touchstartY = 0;
var touchendX = 0;
var touchendY = 0;

var gesuredZone = document.getElementById('gesuredZone');

gesuredZone.addEventListener('touchstart', function(event) {
    touchstartX = event.screenX;
    touchstartY = event.screenY;
}, false);

gesuredZone.addEventListener('touchend', function(event) {
    touchendX = event.screenX;
    touchendY = event.screenY;
    handleGesure();
}, false); 

function handleGesure() {
    var swiped = 'swiped: ';
    if (touchendX < touchstartX) {
        alert(swiped + 'left!');
    }
    if (touchendX > touchstartX) {
        alert(swiped + 'right!');
    }
    if (touchendY < touchstartY) {
        alert(swiped + 'down!');
    }
    if (touchendY > touchstartY) {
        alert(swiped + 'left!');
    }
    if (touchendY == touchstartY) {
        alert('tap!');
    }
}

Мой немного подправленный вариант тырк(touchstart работает, а touchend нет). Дело в том что пример постоянно выводит tap!

Answer 1

[VinZzz]

Наступил на те же грабли. С Mouse всё прекрасно работает, с Touch - нет. Начал поэтапно выводить alert'ом на экран значения. Сами события touchstart и touchend работают. Затем попробовал вывести event.screenX и получил Undefined. Оказывается, конструкция event.screenX не совсем то что нужно для Touch. Порылся в различный статьях. Обнаружил три свойства: touches, targetTouches, changedTouches. Сделал так:
для touchstart:
touchstartX = event.targetTouches[0].screenX;
для touchend:
touchendX = event.changedTouches[0].screenX;
Ну для Y соответственно.