iOS/WebKit: touchmove/touchstart не работает на входе & textarea

Question

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

А вот мой JavaScript:

function onBodyLoad() { 

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

} 

function doNotScroll(event) { 

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

} 

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

Answer 1

Я думаю, что я нашел большой обходной путь для этой проблемы, используя «указатель события» CSS свойство:

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 на прошивке (другие не тестируются до сих пор) игнорировать текстовые области для прокрутки, но позволяет установить фокус и т. д., как обычно.

Answer 2

Thomas Bachem answer является одним!

Я переписал его в 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); 
});