如何防止滑动触发点击？

Question

我使用TouchSwipe创建可滑动的图像列表.我将滑动事件绑定到图像,同时我还绑定了一个将打开图像的大版本的单击事件.

我的问题是,如果我滑动,它也会触发click事件.我尝试点击而不是刷卡,但我无法使其工作.在此之后我尝试了,event.preventDefault()并且event.stopPropagation()在很多地方建议,但没有效果.我的最终解决方案尝试是取消绑定click事件并在事件之后重新绑定它,但是如果我在事件函数的最后绑定事件,它会再次触发click.

$(".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');
        });
    }
});

有没有办法在事件结束后中止事件本身或调用函数,这样我可以在滑动完成后重新点击点击,这样就不会触发重新点击的点击？我也对这个问题的任何其他解决方案持开放态度.

Answer 1

根据您提供的点击与滑动链接

您尝试过下面的代码吗？：

$(".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。