2

ページ上に一連のdivがあり、左にスワイプすると、その下にdivが表示されます。これは、要素が1つしかない場合は正常に機能しますが、要素が複数ある場合は、1つだけでスワイプするのではなく、すべてを同時にスワイプします。

これを改善するために、私はここでアイデアを試しました：タッチエンドイベント中に要素の指を見つける

問題は、最初の要素だけがスワイプされ、残りの要素は静止したままになることです。これを修正する方法について何かアイデアはありますか？使用できると思いthisましたが、常にwindowオブジェクトを返します。

コード：

var originalCoord = {
        x: 100,
        y: 100
    }
    var finalCoord = {
        x: 100,
        y: 100
    }

    function touchMove(event) {
        event.preventDefault();
        finalCoord.x = event.targetTouches[0].pageX
        finalCoord.y = event.targetTouches[0].pageY
    }

    function touchEnd(event) {
        var changeY = originalCoord.y - finalCoord.y
        if (changeY < 30 && changeY > (30 * -1)) {
            changeX = originalCoord.x - finalCoord.x
            if (changeX > 10) {
               var elem = document.elementFromPoint(event.pageX, event.pageY);
               console.log(elem);
                $(elem).css("margin-left", "-54px");
                setTimeout(function () {
                    $(elem).css("margin-left", "0px");}
                , 500);
            }
        }
    }

    function touchStart(event) {
        originalCoord.x = event.targetTouches[0].pageX
        originalCoord.y = event.targetTouches[0].pageY
        finalCoord.x = originalCoord.x
        finalCoord.y = originalCoord.y
    }

    this.addEventListener("touchstart", touchStart, false);
    this.addEventListener("touchmove", touchMove, false);
    this.addEventListener("touchend", touchEnd, false);

デモ（iOSでのみ機能）： http： //www.codekraken.com/testing/snowday/swipe.html

4

2 に答える 2

4

を使用して、イベントが発生した要素を取得できますevent.target。

function touchStart(event){
  var currentElement = event.target;
}
于 2012-10-17T00:54:09.283 に答える
0 
$('#id').on('touchstart',function(e,data) {             
    var obj = e.target;
    obj = $(this);
    var id = obj.find....   
});

jquery関数を使用してjqueryオブジェクトにobj = $(this)変換できます。event.target

一番

M

于 2014-06-09T20:05:46.900 に答える