Last Updated: February 25, 2016
·
1.396K
· macsdickinson

Simple JQuery 2.x swipe event

$(document).on('mousedown', function (e) {
    var ref = arguments.callee;
    var handle = $(this);
    var startX = e.clientX;
    var startY = e.clientY;
    handle.off('mousedown', ref);
    handle.on('mouseup', function(e) {
      handle.off('mouseup', arguments.callee);
      handle.on('mousedown', ref);
      var endX = e.clientX;
      var endY = e.clientY;
      var distanceX = Math.abs(endX - startX);
      var distanceY = Math.abs(endY - startY);
      if (distanceX > 50) {
        handle.trigger((endX > startX) ? 'swipeRight' : 'swipeLeft');
      }
      if (distanceY > 50) {
        handle.trigger((endY > startY) ? 'swipeDown' : 'swipeUp');
      }
      e.preventDefault();
      return false;
    });
  });

Demo here:
http://jsbin.com/IBiliS/1/edit

1 Response
Add your response

Hi, tried your code on iPad, but it isn't responding to swipes.

over 1 year ago ·

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside