touchSwipe.js anchors issue

Question

I've had a problem of touchSwipe.js not triggering swipe events over a elements. I've made my research and found the answer pretty quickly on SO.

This solution worked very well apart from the fact that anchors stopped to behave like they are supposed to behave ... like open web pages for example, or trigger click events when processed by JS.

I guess I'm missing something really important here. Can anyone clarify please? Thanks!

MemesisZX · Answer 1 · 2014-04-02T10:50:54.400

3

you have to reset the excluded element

$("#test").swipe({
    swipe: function(/* stuff */){
        // do some stuff and more
    },

    // and do even more stuff

    // at the end:
    excludedElements: ""
});

It works on my website. The only thing I run into now is that in the default android browser elements not work using jQuery $ ("a.stuff"). click (. the rest works fine.

edited Apr 02 '14 at 10:50

answered Apr 02 '14 at 10:41

MemesisZX

31
7

using excludedElements makes sure that the swipe runs well. But click is disabled now. How do I fix this? – Pratik Poddar May 20 '14 at 08:32
I also have same problem..- using excludedElements makes sure that the swipe runs well. But click is hard to click on ipad. How do I fix this? anybody help me for solve this ? – user3076732 Jun 03 '15 at 06:49

score 1 · Answer 2 · answered Aug 30 '15 at 12:51

The answer is hidden in the answers above since its a combination. to be able to click/tap links but also be able to swipe your menu, you need to use a swipe-treshold of maybe 75 (not zero!) AND make sure there isnt a "A" element excluded:

$('nav#access , .bodywrapper').swipe({
        swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
            // do your stuff.....
        },
        threshold: 75,
        excludedElements: ""
    });

score 0 · Answer 3 · answered Mar 05 '14 at 21:22

Without code, I cannot tell where, but it sounds like you have an e.preventDefault or a return false or an e.stopPropagation that is blocking the normal behavior somewhere in your javascript, perhaps at the end of the swipe event, which would be normal and expected for most functions, since you want to swipe, not go somewhere else, which is why a elements are excluded by default, since touchSwipe is basically overridding the default behavior.

But my question would be do you really want the element to be both clickable and swipeable? If so, look at Tap vs Swipe, where in your swipe handler, you'd place something like this:

$("#test").swipe( {
    tap:function(event, target) {
      //click events go here
    },
    threshold:75
});

Or if you include the jquery.ui.ipad.js plugin you can then also pickup standard jQuery mouse events on children of the touchSwipe object. (Also from the Tap vs. Swipe page, which has examples, go look.)

Also, perhaps look at touchSwipes' defaults, where you can set all sorts of values and handlers for things like longTapThreshhold, doubleTap, tap, and triggerOnTouchLeave, etc.

touchSwipe.js anchors issue

3 Answers3