iOS/WebKit:touchmove/touchstart无法处理输入和textarea

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,但允许像往常一样设置焦点等.