Question

我有一个无法滚动的IOS Web App。出于这个原因，我想停用滚动。为此，我使用了元素的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

我认为我已经使用“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上的Mobile Safari（目前尚未测试的其他）忽略textareas进行滚动，但允许像往常一样设置焦点等。

Answer 2

Thomas Bachem answer就是那个！

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

现在，当您触摸并滚动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);
});

iOS / WebKit：touchmove / touchstart无法处理输入＆amp; textarea的

2 个答案: