Запрет прокрутки страницы при перетаскивании в IOS и Android - PullRequest
Новая
       28

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

18 голосов
/ 12 февраля 2012

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

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

Ответы [ 4 ]

25 голосов
/ 12 февраля 2012

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

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

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

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

12 голосов
/ 29 августа 2017

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

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

  • Предпочтительным решением является использование стиля CSS touch-action, чтобы указать, что прокрутка не должна выполняться (например, со значением «none»)

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

10 голосов
/ 12 февраля 2012

Если вы не хотите использовать 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);
3 голосов
/ 12 февраля 2012 
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/

...