タッチデバイスでの左/右スワイプを検出しますが、上/下スクロールを許可します

debugcn 投稿 Dev

ラファエル・ジェガー：

左/右のスワイプを検出して反応する必要がありますが、ユーザーがXピクセルの最大の上下移動で指を左/右のみに移動する限り、同じ要素をスクロールできるようにしたいと思います、それはスクロールするべきではありませんが、彼がXを超えると、スクロールするはずです。

だから私がしたことは：

var startX, startY, $this = $(this);
function touchmove(event) {
        var touches = event.originalEvent.touches;
        if (touches && touches.length) {
            var deltaX = touches[0].pageX - startX;
            var deltaY = touches[0].pageY - startY;
            if (Math.abs(deltaY) > 50) {
                $this.html('X: ' + deltaX + '<br> Y: ' + deltaY + '<br>TRUE');
                $this.unbind('touchmove', touchmove);
                return true;
            } else {
                $this.html('X: ' + deltaX + '<br> Y: ' + deltaY);
                event.preventDefault();
            }
        }
    }

    function touchstart(event) {
        var touches = event.originalEvent.touches;
        if (touches && touches.length) {
            startX = touches[0].pageX;
            startY = touches[0].pageY;
            $this.bind('touchmove', touchmove);
        }
        //event.preventDefault();
    }

しかし、「if」の場合にスクロールする機能は復元しません...

ヒントをありがとう。

ココナッツ：

独自のタッチハンドラーイベントを作成しました。

それはチェックします：

高速クリック： 'fc'

左にスワイプ：「swl」

右にスワイプ：「swr」

上にスワイプ： 'swu'

下にスワイプ：「swd」

各チェックは対応するイベントを初期化します。ただし、スクロールして他の通常の操作を行うことができます。新しいイベントがいくつかあります。

swl swrが必要です。クリックイベントにはfc（fastclick）を使用することをお勧めします。通常のクリックよりもはるかに高速です。

window.onload = function() {
    (function(d) {
        var
            ce = function(e, n) {
                var a = document.createEvent("CustomEvent");
                a.initCustomEvent(n, true, true, e.target);
                e.target.dispatchEvent(a);
                a = null;
                return false
            },
            nm = true,
            sp = {
                x: 0,
                y: 0
            },
            ep = {
                x: 0,
                y: 0
            },
            touch = {
                touchstart: function(e) {
                    sp = {
                        x: e.touches[0].pageX,
                        y: e.touches[0].pageY
                    }
                },
                touchmove: function(e) {
                    nm = false;
                    ep = {
                        x: e.touches[0].pageX,
                        y: e.touches[0].pageY
                    }
                },
                touchend: function(e) {
                    if (nm) {
                        ce(e, 'fc')
                    } else {
                        var x = ep.x - sp.x,
                            xr = Math.abs(x),
                            y = ep.y - sp.y,
                            yr = Math.abs(y);
                        if (Math.max(xr, yr) > 20) {
                            ce(e, (xr > yr ? (x < 0 ? 'swl' : 'swr') : (y < 0 ? 'swu' : 'swd')))
                        }
                    };
                    nm = true
                },
                touchcancel: function(e) {
                    nm = false
                }
            };
        for (var a in touch) {
            d.addEventListener(a, touch[a], false);
        }
    })(document);
    //EXAMPLE OF USE
    var h = function(e) {
        console.log(e.type, e)
    };
    document.body.addEventListener('fc', h, false); // 0-50ms vs 500ms with normal click
    document.body.addEventListener('swl', h, false);
    document.body.addEventListener('swr', h, false);
    document.body.addEventListener('swu', h, false);
    document.body.addEventListener('swd', h, false);
}

この場合、hはすべてのタイプのイベントのハンドラーであり、ハンドラーを本文に追加します。

私があなたの質問を理解しているので、あなたはただ書く必要があります

YOURELEMENT.addEventListener('swr',YOURSWIPERIGHTFUNCTION,false);
YOURELEMENT.addEventListener('swl',YOURSWIPELEFTFUNCTION,false);

複数の要素と同じ関数を処理するには... 1つのハンドラーを追加するだけです。

だからあなたが持っているなら

<ul id="ul"><li>1</li><li>2</li><li>3</li></ul>

あなたがやる：

var deleteli=function(e){
    var li=e.target;
    console.log('deleting '+li.textContent);
}
document.getElementById('ul').addEventListener('swl',deleteli,false);

fcとswrも同じ

iosにはバグがあります。alert（）を使用しないでください。2回実行されます。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]