Запретить прокрутку страницы при перетаскивании в IOS и Android

Я работаю над html5 холстом, но я не знаю, как обрабатывать события касания. Когда пользователь коснется экрана и перетаскивает его, браузер просматривает страницу. Я хотел бы предотвратить это, и начать прикосновение, и коснуться конечной позиции. Возможно ли это?

Заранее спасибо

Ответ 1

Вам нужно переопределить поведение касания по умолчанию, чтобы перестать перетаскивать страницы. Очевидно, вам придется обрабатывать их снова, если ваша страница становится больше доступной области, но когда вы создаете игру, вы предположите, что вы делаете макет 100%/100%.

function preventBehavior(e) {
    e.preventDefault(); 
};

document.addEventListener("touchmove", preventBehavior, {passive: false});

Изменение: здесь рекомендация W3C о сенсорных событиях, которые могут быть вам полезны.

Ответ 2

Из-за критических изменений, внесенных в последние версии Chrome, приведенные выше ответы больше не верны. Прикрепление прослушивателя событий касания к документу или элементам тела приведет к тому, что прослушиватель событий будет зарегистрирован в "пассивном" режиме, что приведет к игнорированию вызовов preventDefault.

Есть два решения:

Предпочтительным решением является использование стиля CSS touch-action, чтобы указать, что прокрутка не должна выполняться (например, со значением "none")
В случаях, когда это не подходит (например, если тип взаимодействия должен динамически изменяться таким образом, который не может быть определен до начала жеста), тогда слушатель события должен быть зарегистрирован с третьим параметром, установленным на { passive: false } (вы должны выполнить браузер обнаружение, чтобы гарантировать, что этот стиль поддерживается первым, хотя).

Ответ 3

Если вы не хотите использовать jQuery mobile или любую другую библиотеку, вы можете попробовать это.

var startX, startY, endX, endY;
document.addEventListener("touchstart", function(e){
    startX = e.touches[0].pageX;
    startY = e.touches[0].pageY;

    e.preventDefault();//Stops the default behavior
}, false);

document.addEventListener("touchend", function(e){
    endX = e.touches[0].pageX;
    endY = e.touches[0].pageY;

    e.preventDefault();//Stops the default behavior
}, false);

Ответ 4

canvas.addEventListener('touchstart', function(e)
{
    alert(e.changedTouches[0].pageX + " " + e.changedTouches[0].pageY);
}
canvas.addEventListener('touchend', function(e)
{
    alert(e.changedTouches[0].pageX + " " + e.changedTouches[0].pageY);
}

Вот хорошая статья о касании и жестикуляции на мобильных телефонах:

http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

Ответ 5

Следующее решение предотвращает прокрутку при перетаскивании И в то же время работает обычная прокрутка (если не перетаскивать)

var scrollable = true;

var listener = function(e) {
    if (! scrollable) {
        e.preventDefault();
    }
}

document.addEventListener('touchmove', listener, { passive:false });


onDragstartHandler() {
  scrollable = false;
}

onDragendHandler(} {
  scrollable = true;
}

Не забудьте привязать onDragstartHandler и onDragendHandler к связанным элементам