stephband.info

jQuery.event.swipe

Project

Swipe events

swipeleft, swiperight, swipeup, swipedown
Fired when the finger is released from the touch surface (or mouse button) if the finger has a) just moved at least a threshold distance or b) moved quickly over a shorter distance. Also responds to mouse events.

Swipe event objects are augmented with the properties:

e.pageX, e.pageY
Current page coordinates of pointer.
e.startX, e.startY
Page coordinates the pointer had at the start of the swipe.
e.distX, e.distY
Distance finger moved during the swipe.
e.velocityX, e.velocityY
Velocity, in pixels/ms, averaged over the last few move events.

How to use swipe events

var slides = jQuery('.slides'),
    i = 0;

slides
.on('swipeleft', function(e) {
  slides.eq(i + 1).addClass('active');
})
.on('swiperight', function(e) {
  slides.eq(i - 1).addClass('active');
});

Swipe events are a thin wrapper around the moveend event; a convenience to reveal when a finger has moved in a swipe gesture. The underlying move events bubble and you can delegate them, but making the swipe events also do this would be unnecessarily expensive. Use move events if you need more flexibility.

Swipe or scroll

Swipe events are a thin wrapper built on top of move events (stephband.info/jquery.event.move). Move events, by default, override native scrolling, as they assume that you want to move something rather than scroll the window. To re-enable scrolling, call e.preventDefault() inside a movestart handler.

In the example above, we want to be able to swipeleft and swiperight, but scroll up and down. Inside a movestart handler, the direction of the finger is moving is calculated and the event is prevented if it is found to be moving up or down::

jQuery('.mydiv')
.on('movestart', function(e) {
  // If the movestart is heading off in an upwards or downwards
  // direction, prevent it so that the browser scrolls normally.
  if ((e.distX > e.distY && e.distX < -e.distY) ||
      (e.distX < e.distY && e.distX > -e.distY)) {
    e.preventDefault();
  }
});

To see how the example at the top of the page works, view source.

Who made it?

I did. I'm stephband on twitter, if you're into that sort of thing.