6

TouchSwipeを使用して、スワイプ可能な画像リストを作成します。スワイプ イベントを画像にバインドすると同時に、画像の大きなバージョンを開くクリック イベントもバインドします。

私の問題は、スワイプするとクリックイベントも発生することです。スワイプの代わりにタップしようとしましたが、うまくいきません。この後色々試しevent.preventDefault()てみevent.stopPropagation()たところ色々と提案されましたが効果がありませんでした。私の最終的な解決策の試みは、クリックイベントをバインド解除してイベントの後に再バインドすることでしたが、イベント関数の最後でイベントをバインドすると、クリックが再度発生します。

$(".js-header-swipe-image").swipe({
    swipe:function(event, direction, distance, duration, fingerCount){
        $("#details").unbind('click');//Temporary unbind, otherwise the swipe's click would trigger the gallery opening.

        //Handling swipe direction.

        $('#details').on('click', '.js-header-swipe-image', function (){//Rebind the temporary unbinded event.
            console.log('click');
            $('#modal-gallery').modal('show');
        });
    }
});

イベント自体を中止するか、イベントが終了した後に関数を呼び出して、スワイプが終了した後にクリックを再バインドして、再バインドされたクリックをトリガーしないようにする方法はありますか? 私はまた、問題に対する他の解決策にもオープンです。

4

4 に答える 4

1

タップ vs スワイプに提供したリンクに基づいて

以下のコードを試しましたか? :

$(".js-header-swipe-image").swipe({
    tap: function(event, target) {
        console.log('click');
        $('#modal-gallery').modal('show');
    },
    swipe:function(event, direction, distance, duration, fingerCount){
        //Handling swipe direction.
    }
});

編集：ワーキングソリューション

HTML :

<style type="text/css">
    .js-header-swipe-image {
        background-color:blue;
        color:white;
        width:500px;
        height:500px;
    }
</style>
<div id="modal-gallery">
    Hello!
</div>
<div class="js-header-swipe-image">
    Swiping Div
</div>

jQuery :

<script type="text/javascript">
    $(document).ready(function() {
        $(".js-header-swipe-image").swipe({
            tap: function(event, target) {
                alert('tap');
            },
            swipe:function(event, direction, distance, duration, fingerCount){
                //Handling swipe direction.
                alert('swipe');
            }
        });
    });
</script>

div を「スワイプ」するとアラートが表示swipeされ、div をクリックするとアラートが表示されtapます。

于 2013-10-07T14:50:41.673 に答える