iOS / WebKit：touchmove / touchstart不能在input＆textarea上工作

我有一个IOS Web应用程序无法滚动。 为此，我想停用滚动。 为此，我使用元素的ontouchmove属性，并让它调用一个使用element.preventDefault的函数。 但是，即使在元素被禁用的情况下，我也无法在textarea或input元素上启动触摸事件。 我也尝试通过JavaScript的addEventlistener绑定touchmove或touchstart事件到这些元素，但没有成功！

这里是我的JavaScript：

function onBodyLoad() { document.addEventListener( "touchstart", doNotScroll, true ); document.addEventListener( "touchmove", doNotScroll, true ); } function doNotScroll( event ) { event.preventDefault(); event.stopPropagation(); } 

谢谢你的帮助！

Answer 1

我想我已经find了一个很好的解决方法，使用“pointer-events”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); }); 

这将使iOS上的移动Safari（其他未经testing）忽略用于滚动的textarea，但允许像往常一样设置焦点等。

Answer 2

托马斯·巴赫姆的答案是唯一的！

我在jQuery中重写了它。 只需添加一个类的scrollFix到你想要的input，你就可以走了。 或者使用$('input, textarea')将事件处理程序附加到所有input和textareas。

现在，当你触摸并滚动iOS 8+上的input时，input将禁用所有的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); });