Создание кросс-платформенных приложений – правильное

использование touch-events

Зачем кроссплатформенные приложения?

Инструменты

Примеры

gestures

Javascript обработкаfunction startup() {

var el = document.getElementById(“scrollDiv”);

el.addEventListener("touchstart", handleStart, false);

el.addEventListener("touchend", handleEnd, false);

el.addEventListener("touchcancel", handleCancel, false);

el.addEventListener("touchmove", handleMove, false);

}

Подводные камни

Мультитач

function handleStart(evt) {

…

var touches = evt.originalEvent.targetTouches;

var totalTouches = touches.length;

…

}

Направление движенияvar direction = true;

// true / false

function handleStart(evt) {

…

var touches = event.originalEvent.targetTouches;

var startcoords = endcoords = touches[0];

// pageX / pageY

…

}

function handleMove(evt) {

…

var touches = event.originalEvent.targetTouches;

var endcoords = touches[0];

…

}

If(Math.abs(endcoords.pageX - startcoords.pageX)

> Math.abs(endcoords.pageY - startcoords.pageY)) {

direction = false;

} else {

direction = true;

}

Click vs. Tap

Math.abs(endcoors.pageX – startcoords.pageX) < 10

handleStart:

obj = evt.target

handleEnd:

obj.click()

Бесполезная прокрутка

If(scrollable.scrollHeight > scrollDiv.offsetHeight()

Rubber banding

Вверху – 0

Внизу – MaxScroll

handleEnd:

MaxScroll = Высота прокручиваемой области - Высота видимого окна

Готовые решения

Все!

• Сейчас ваши вопросы…

Контакты

• http://mobila.name/