1

这是我的第一篇文章，所以我试图解释清楚：

我正在开发一个 Web 应用程序，但重点是，我想让我的用户感觉它是一个原生应用程序。在本机应用程序中，您无法像在 iOS Safari 中那样滚动，所以我尝试使用 event.preventDefault 禁用滚动。这很好用，除了表单元素和链接不再可点击。我的解决方案是这个小脚本，但是如果您开始触摸其中一个转义元素，它无论如何都会滚动。没什么大不了的，但它让我发疯......

脚本注释：
isTouch 如果是可触摸设备
则返回 true/false 如果数组包含字符串，.contains 方法返回 true/false

if (isTouch) {
    window.addEventListener("touchstart", function (evt) {
        var target = evt.touches[0].target;
        var tags = 'a input textarea button'.split(' ');

        if ( tags.contains(target.tagName) === false ) {
            evt.preventDefault();
        }       
    }, false);
}

编辑 我的主要问题是，是否有一种解决方案可以在没有 touchmove 事件的情况下触发点击事件以允许滚动

编辑 2
我解决了这个问题。我的解决方案是模拟交互式元素上的事件： 

var eventFire = function (el, etype) {
    if (el.fireEvent) {
        (el.fireEvent('on' + etype));
    }
    else {
        var evObj = document.createEvent('Events');
        evObj.initEvent(etype, true, false);
        el.dispatchEvent(evObj);
    }
}

if (isTouch) {
    window.addEventListener("touchstart", function (evt) {
        var target = evt.touches[0].target;
        var foc = 'input textarea'.split(' ');
        var clck = 'a button'.split(' ');

        if ( foc.contains(target.tagName) ) {
            target.focus();
            eventFire(target,'click');
            evt.preventDefault();
        }
        else {
            evt.preventDefault();
        }

    }, false);
}
4

0 回答 0