1

これは私の最初の投稿なので、明確に説明しようとします。

私はWebアプリケーションに取り組んでいますが、主なポイントは、ユーザーにネイティブアプリのように感じさせたいということです. ネイティブ アプリでは iOS サファリのようにスクロールできないので、event.preventDefault でスクロールを無効にしようとしました。これはうまく機能しますが、フォーム要素とリンクはもはやタップ可能ではありません。それに対する私の解決策はこの小さなスクリプトでしたが、エスケープされた要素の 1 つに触れ始めると、とにかくスクロールします。大したことではありませんが、気が狂ってしまいます...

スクリプトの注記:
タッチ可能なデバイス
の場合、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 イベントなしでタップイベントを発生させる解決策があるかどうかです

EDIT 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