如何防止滑动触发点击？

Question

我使用TouchSwipe来创建可滑动的图片列表。我将滑动事件绑定到图像上，同时也绑定了一个点击事件，用于打开图像的大版本。

我的问题是，如果我滑动，它也会触发点击事件。我尝试了使用tap代替swipe，但无法使其工作。之后，我尝试了在许多地方建议的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');
        });
    }
});

有没有一种方法可以中止事件本身或在事件完成后调用函数，以便我可以重新绑定点击，以便它不会触发重新绑定的点击？我也对任何其他解决方案持开放态度。

- totymedli

---

你找到任何解决方案了吗？ - flakerimi

@Flakerim 不，但是发现在移动平台上实现方式不同，所以这个问题在那里不存在。但在PC上仍然存在问题。 - totymedli

我修复了我的问题，它使用的是Revolution Slider的滑动而不是swipe。我将$ .fn.swipe重命名为$ .fn.swipeing，然后调用.swipeing（{}）。请检查一下是否能帮到您。您可能还有其他覆盖swipe的插件。 - flakerimi

Answer 1

我使用以下代码，以便在触摸结束时仅在未被滑动时触发按钮：

var startY;
var yDistance;

function touchHandler(event) {
    touch = event.changedTouches[0];
    event.preventDefault();
}

$('.button').on("touchstart", touchHandler, true);
$('.button').on("touchmove", touchHandler, true);

$('.button').on("touchstart", function(){
    startY = touch.clientY;
});

$('.button').on('touchend', function(){

    yDistance = startY - touch.clientY;

    if(Math.abs(yDist) < 30){

        //button response here, only if user is not swiping
        console.log("button pressed")
    }
});

- LocDog

Answer 2

根据您提供的Tap vs Swipe链接，您是否尝试过以下代码？：

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

- Nunners

---

不，触摸事件根本没有被触发。 - totymedli

我已添加了一些HTML和Javascript，使用TouchSwipe库可以正常工作。如果您无法通过上述代码使其正常工作，您可以告诉我您正在使用的jQuery版本，并提供一个JSFiddle代码示例吗？ - Nunners

Answer 3

我曾经遇到过同样的问题。由于我设置了threshold:0，因此无法调用tap函数。一旦我将其注释掉，tap事件就可以正常工作了。

            container.swipe({
                touch:function(event, target) {
                    alert('touch');
                },
                tap:function(event, target) {
                    alert('tapped');
                },
                swipeLeft:function(event, direction, distance, duration, fingerCount) {
                    console.log('swipe left');
                },
                swipeRight:function(event, direction, distance, duration, fingerCount) {
                    console.log('swipe RIGHT');
                },
                swipeUp:function(event, distance, duration, fingerCount, fingerData) {
                    console.log("swipeUp from callback");
                },
                swipeDown:function(event, distance, duration, fingerCount, fingerData) {
                    console.log("swipeDown from callback");
                }
                // threshold:0
            });

- Federico

Answer 4

    var isTouchMoving = false;



    $( "#items .item" ).on("vclick", function(){
        if(isTouchMoving){
            isTouchMoving = false;
            return false;
        }

        //do something
    });

    $(document).on('vmousemove', function(){
        isTouchMoving = true;
    });

    $(document).on('scrollstop', function(){
        isTouchMoving = false;
    });

- tkjeon