проблемы с прокруткой жестов - PullRequest
Новая
       22

проблемы с прокруткой жестов

3 голосов
/ 01 февраля 2011

Я использую следующий Javascript для создания обратных вызовов ontouchstart / move / end для элементов div для веб-приложения iOS. Единственная проблема на данный момент заключается в том, что при попытке прокручивать страницу вверх и вниз он запускает элемент ontouchstart и изменяет CSS элемента div. Я хочу, чтобы CSS элемента div изменился только , когда пользователь выбирает элемент. Я довольно прост с Javascript, но если кто-нибудь знает какой-либо способ заставить Javascript срабатывать только тогда, когда пользователь выбирает элемент, он будет очень признателен!

Спасибо!

TC

Javascript: 

function onclickCallback( event ) {

}

function ontouchstartCallback( event ) {

event.target.className = 'choice_link_selected';
}

function ontouchmoveCallback( event ) {

event.target.className = 'choice_link_selected';
}

function ontouchendCallback( event ) {

event.target.className = 'choice_link';

}

HTML: 

<div class="choice_link" onclick="onclickCallback(event);" ontouchstart="ontouchstartCallback(event);" ontouchend="ontouchendCallback(event);" ontouchmove="ontouchmoveCallback(event);">
            <a href="javascript:location.href='test.php'">Test</a>
         </div>

Ответы [ 3 ]

1 голос
/ 01 февраля 2011

используйте event.stopPropagation(), чтобы остановить всплытие событий, и используйте event.preventDefault(), чтобы избежать обработчика по умолчанию. 

<div id="ctr" class="choice_link">
     <a href="javascript:location.href='test.php'">Test</a>
</div>
<script>
function onTouchStart(event) {
  event.stopPropagation();
  event.preventDefault();
  event.target.className = 'selected';
}

function onTouchEnd(event) {
  event.stopPropagation();
  event.preventDefault();
  event.target.className = '';
}

var ctr = document.getElementById('ctr');
ctr.addEventListener('touchstart', onTouchStart, false);
ctr.addEventListener('touchend', onTouchEnd, false);
</script>
0 голосов
/ 01 февраля 2011

Насколько я знаю, правильно использовать только обработчик onmousemove, чтобы переключить className в состояние по умолчанию. Проблема с зависанием состояния кнопки во время прокрутки iPhone связана с другой проблемой: при попытке прокрутки представления любое взаимодействие с отображением страницы блокируется для выполнения прокрутки с хорошей производительностью и предотвращения конфликтов. Тогда содержимое страницы выглядит замороженным. Вот почему ваша кнопка не может быть восстановлена ​​в состояние по умолчанию до прокрутки.

Печально то, что это поведение зависит от того, как вы запустите прокрутку. Если вы прокручиваете область div и кнопка div может отправить событие touchmove до процесса прокрутки, это сработает, в противном случае класс css будет восстановлен после завершения прокрутки.

Некоторые сенсорные инфраструктуры JavaScript решают эту проблему, перехватывая события касаний, предотвращая поведение браузера по умолчанию (например, прокрутку) и внедряя собственную систему прокрутки.

Я знаю, это не решение, но может быть объяснением.

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

0 голосов
/ 01 февраля 2011

Если я понимаю, что вы спрашиваете:

Добавить к ontouchstartCallback : 

if(event.touches.length < 1) return;
event.target.touchdata = [event.touches[0].clientX, event.touches[0].clientY];

Заменить содержимое ontouchmoveCallback на: 

if(event.touches.length < 1) return;
var threshold = 5;
if(event.target.touchdata)
{
    if(Math.abs(event.touches[0].clientX - event.target.touchdata[0]) > threshold
    || Math.abs(event.touches[0].clientY - event.target.touchdata[1]) > threshold)
    {
        event.target.className = 'choice_link';
        event.target.touchdata = false;
    }
}

Что это делает:

Когда начинается событие касания, координаты X / Y присоединяются к элементу DOM, к которому прикоснулись.Затем при каждом событии перемещения он проверяет, превышает ли движение определенный порог пикселей (в данном случае 5).Если это так, мы преждевременно изменяем класс и удаляем координаты X / Y, поскольку они нам больше не нужны.

...