javascript - Multi-finger touch swipe event - Stack Overflow

admin管理员组

文章数量:1405328

I have two $('body').swipe(); functions below, which obviously can't function together because the second one cancels out what I want to do (two functions run on the same DOM element, etc.)...

The first function works as it should. Swipes left and right with TWO fingers. My problem is, this disables the normal one finger page scroll one would be able to do on the iPad.

Question: I want to run the swipe left & right functions with two fingers (works), however I want to enable allowPageScroll: 'vertical' on 1 finger swipe. How can I acplish this? I can't figure out a way to run the options (i.e. allowPageScroll: 'vertical', threshold: 200, fingers: 2) within the swipeLeft: and swipeRight: functions only.

The plug-in used can be found here:

$('body').swipe({
    swipeLeft: function (event, direction, distance, duration, fingerCount) {

        // set cookie
        $.cookie('sb-swipe', 'inactive', { expires: 1 });

        //This only fires when the user swipes left
        openDashboard();

        // hide swipe instructions, if applicable
        $('div.instructions-overlay').fadeOut('slow');
    },
    swipeRight: function (event, direction, distance, duration, fingerCount) {
        //This only fires when the user swipes right
        closeDashboard();

        $('#employee-dash-btn').hide();
    },
        allowPageScroll: 'vertical',
        threshold: 200,
        fingers: 2
});

$('body').swipe({
    allowPageScroll: 'vertical',
    fingers: 1
});

I have two $('body').swipe(); functions below, which obviously can't function together because the second one cancels out what I want to do (two functions run on the same DOM element, etc.)...

The first function works as it should. Swipes left and right with TWO fingers. My problem is, this disables the normal one finger page scroll one would be able to do on the iPad.

Question: I want to run the swipe left & right functions with two fingers (works), however I want to enable allowPageScroll: 'vertical' on 1 finger swipe. How can I acplish this? I can't figure out a way to run the options (i.e. allowPageScroll: 'vertical', threshold: 200, fingers: 2) within the swipeLeft: and swipeRight: functions only.

The plug-in used can be found here: https://github./mattbryson/TouchSwipe-Jquery-Plugin

$('body').swipe({
    swipeLeft: function (event, direction, distance, duration, fingerCount) {

        // set cookie
        $.cookie('sb-swipe', 'inactive', { expires: 1 });

        //This only fires when the user swipes left
        openDashboard();

        // hide swipe instructions, if applicable
        $('div.instructions-overlay').fadeOut('slow');
    },
    swipeRight: function (event, direction, distance, duration, fingerCount) {
        //This only fires when the user swipes right
        closeDashboard();

        $('#employee-dash-btn').hide();
    },
        allowPageScroll: 'vertical',
        threshold: 200,
        fingers: 2
});

$('body').swipe({
    allowPageScroll: 'vertical',
    fingers: 1
});

• javascript
• jquery
• html

Share Improve this question Follow asked Nov 14, 2013 at 20:14 Mike BarwickMike Barwick 5,36766 gold badges5454 silver badges7878 bronze badges 6

• 1 quojs.tapquo. – HIRA THAKUR Commented Nov 17, 2013 at 9:14
• Hmm. Not sure how I feel about using an entire new library just for one function. Haven't heard of this either. Is it on Apple's "approval" list? – Mike Barwick Commented Nov 17, 2013 at 16:23
• Though I'm prob going to need to look at another solution. – Mike Barwick Commented Nov 17, 2013 at 17:32
• Hammertime! eightmedia.github.io/hammer.js and fingerns.length appliness./multitouch-with-hammer-js – john Smith Commented Nov 17, 2013 at 22:07
• Yeah, I looked at Hammer. Looks like this is the way I should have went. – Mike Barwick Commented Nov 17, 2013 at 22:09

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 5 +50

I think I get something working, but not with the TouchSwipe plugin you link (after a lot of tests with it I just give up and try another thing).

I've use Touchy (1.98 kb) that can be found here, which provide support for multiple fingers up to 5. The other part to detect a swipe to the left or right is a little manual, by saving the X coordinates of the two fingers at the start of the touch event and at the end into variables.

We have just to pare if the two first coordinates are larger or smaller. Code below is a swipe to the right :

if (finger1Start < finger1End && finger2Start < finger2End)

I decide to consider a real swipe when the two fingers have move in the same direction, but it's up to you if you want to change.

Last thing, if you really want the threshold, you have just to save the start and end time of the event with new Date().getTime(); subtract them and verify that they are > of 200ms. I can update the code if you want to.

Here is the Fiddle, I've tested it on iPhone 4s (iOS 7.0.3).

var finger1Start,
    finger1End,
    finger2Start,
    finger2End,
    threshold = 200;

$('body').touchy({
  two: function (hand, finger1, finger2) {
    
    hand.on('start', function (points) {
      finger1Start = points[0].x;
      finger2Start = points[1].x;
    });
    
    hand.on('end', function (points) {
      finger1End = points[0].x;
      finger2End = points[1].x;
      testSwipe();
    });
  }
});

function testSwipe () {
  if (finger1Start < finger1End && finger2Start < finger2End) 
    // The two X coordinates of the fingers have swipe to the right
    if (finger1End - finger1Start >= threshold &&
        finger2End - finger2Start >= threshold) {
      $('#message').text("You have swipe to the right");
    }
    else {
      $('#message').text("Not enought swipe");
    }
        
  }
  else if (finger1Start > finger1End && finger2Start > finger2End) {
    // The two X coordinates of the fingers have swipe to the left
    if (finger1Start - finger1End >= threshold &&
        finger2Start - finger2End >= threshold) {
      $('#message').text("You have swipe to the left");
    }
    else {
      $('#message').text("Not enought swipe");
    }
  }
}

#message {
  color:green;
}

#text {
  width: 100px
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent./jairajs89/Touchy.js/master/touchy.js"></script>
<body>
    <div id="message"></div>
    <div id="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut placerat lacus. Etiam vel aliquam quam. Aenean et hendrerit elit, quis porttitor erat. Cras lacinia ornare sem ut laoreet. Sed consectetur felis at hendrerit posuere. Nam porttitor magna sed quam malesuada, eu adipiscing sapien dapibus. Praesent fermentum sem sit amet diam posuere, non vestibulum velit porttitor. Etiam sodales tellus nec mi venenatis dignissim. Aliquam metus lectus, feugiat ac tellus hendrerit, auctor sollicitudin metus.
    
    Morbi bibendum lectus erat, a iaculis tellus egestas nec. Cras adipiscing augue ac lectus placerat tempor. Fusce iaculis mollis lectus, nec mattis mi rhoncus id. Nullam scelerisque feugiat mollis. Mauris nec augue erat. Aliquam fermentum nibh ligula, vel tempus dui feugiat vel. Aliquam a consequat nisl, eu vulputate velit. Mauris pulvinar accumsan leo nec venenatis. Nullam at orci nec lorem facilisis tempor ac vitae purus. Fusce elit nulla, modo sit amet nisi nec, euismod egestas sem. Nulla dui libero, accumsan et dignissim vitae, modo vitae leo. Suspendisse potenti. Pellentesque vitae lectus sit amet lacus pulvinar imperdiet in id nulla. Nunc lacinia felis eu lobortis pretium.
    </div>
</body>

本文标签： javascriptMultifinger touch swipe eventStack Overflow