Особенности использования touch events в кроссплатформенной разработке. Михаил Ларченко

Создание кросс-платформенных приложений – правильное использование 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 = “”;// “” / vert / hor 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 = “hor”;

} else {

direction = “vert”;

}

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/