Geek asks and answers

Prevent Swipe events when interacting with items on a page

I am creating an iPad application that is essentially a series of slides.

When I finished reading the slide, I can scroll to the next slide * (using Zepto swipe), which changes window.location to the next slide. (the swipe event is bound to window.body, since it should work on the whole page) ...

Here's the problem: some slides have interactive elements such as buttons, draggable elements, etc. The problem is that when using some of these interactive elements, a swipe event is triggered.

Does anyone know how to prevent the wipes from starting in these cases? Perhaps sensitivity settings, etc.

I'm at a dead end ...

Best wishes and thanks!

+5
source share
2 answers

As Zepto manages touch events, it connects listeners with events touchstart, touchendand touchmoveon document.body. It then calculates which event sends and fires the event for the element that received the event touchstart. This event then breaks through the DOM tree, invoking listeners for each element.

This gives us two ways to prevent swipe events:

First, you can do something like:

$('#my-child-element').bind('touchstart touchend touchup', function(event) {
    event.stopPropagation();
});

When your child receives one touch event, this will prevent it from propagating to the parent elements, and most importantly the body tag. This prevents the Touch Zepto processor from doing anything by blocking frame-by-frame, tap, singleTap, longTap, and DoubleTap events while working on this element.

, , :

$('#my-child-element').bind('swipeLeft swipeRight', function(event) {
    event.stopPropagation();
});

- Zepto , . Zepto tap .

: http://jsfiddle.net/bnickel/dUuUd/

+2

Hope "excludedElements" , .

    $(".block").swipe({
    swipe: function (event, direction, distance, duration, fingerCount, fingerData) {

    },
    excludedElements: ".link, a",
    threshold: 0
});
0

More articles:


All Articles