iOS / WebKit: touchmove / touchstart не работает для ввода и текстовой области - PullRequest
Новая
       23

iOS / WebKit: touchmove / touchstart не работает для ввода и текстовой области

9 голосов
/ 14 ноября 2010

У меня есть IOS Web App, который нельзя прокручивать.По этой причине я хочу отключить прокрутку.Для этого я использую атрибут элемента ontouchmove и вызываю у него функцию, которая использует element.preventDefault.Однако я не могу обнаружить какое-либо событие касания, когда оно начинается с текстовой области или элемента ввода, даже когда этот элемент отключен!Я также попытался связать событие touchmove или touchstart с этими элементами с помощью JavaScript addEventlistener, но безуспешно!

А вот мой JavaScript: 

function onBodyLoad() {

 document.addEventListener( "touchstart", doNotScroll, true );
 document.addEventListener( "touchmove", doNotScroll, true );

}

function doNotScroll( event ) {

 event.preventDefault();
 event.stopPropagation();

}

Спасибо за любую помощь!

Ответы [ 2 ]

11 голосов
/ 27 апреля 2011

Мне кажется, я нашел отличный обходной путь для этой проблемы, используя CSS-свойство "pointer-events": 

function setTextareaPointerEvents(value) {
    var nodes = document.getElementsByTagName('textarea');
    for(var i = 0; i < nodes.length; i++) {
        nodes[i].style.pointerEvents = value;
    }
}

document.addEventListener('DOMContentLoaded', function() {
    setTextareaPointerEvents('none');
});

document.addEventListener('touchstart', function() {
    setTextareaPointerEvents('auto');
});

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
    setTextareaPointerEvents('none');
});

document.addEventListener('touchend', function() {
    setTimeout(function() {
        setTextareaPointerEvents('none');
    }, 0);
});

Это заставит Mobile Safari на iOS (другие пока не тестировались) игнорировать текстовые области для прокрутки, но позволяет установить фокус и т. Д. Как обычно.

2 голосов
/ 24 декабря 2015

ответ Томас Бачем - это один!

Я переписал его в jQuery. Просто добавьте класс scrollFix к желаемым входам, и вы готовы к работе. Или прикрепите обработчики событий ко всем входам и текстовым областям, используя $('input, textarea').

Теперь, когда вы касаетесь и прокручиваете вход на iOS 8+, вход отключается на всех своих pointer-events (включая проблемное поведение). Эти pointer-events включаются, когда мы обнаруживаем простое касание. 

$('.scrollFix').css("pointer-events","none");

$('body').on('touchstart', function(e) {
    $('.scrollFix').css("pointer-events","auto");
});
$('body').on('touchmove', function(e) {
    $('.scrollFix').css("pointer-events","none");
});
$('body').on('touchend', function(e) {
    setTimeout(function() {
        $('.scrollFix').css("pointer-events", "none");
    },0);
});
...