As popular as mobile browsing has become lately, I haven’t found a much in the way of solid swipe management libraries, for any of the major frameworks. Fortunately, the logic is pretty simple.

The basic idea is this:

1. When the mouse/finger goes down, measure where it hit.
2. When the mouse/finger goes back up, measure again.
3. Compare the 2 points – if it meets a certain arbitrary threshold, a swipe event has occurred.

Very simple math can be used to determine the kind of swipe – if the x of the end event is greater than the x of the start event, then a right swipe happened – if it’s less, the swipe was going left. Same logic applies to the y axis and up/down events.

Here’s a simple example for just left/right swipes.

MooTools [untested]:


The e.preventDefault and return false are needed to prevent images from being dragged by the browser.

If you wanted to make sure that there was movement, you could add a mousemove handler during the mousedown, that immediately removes itself and attaches the mousedown handler – in fact in looking this up on a project I’ve had lying around for a while, I noticed I’d done just that – logically I don’t think it’s necessary, but I probably had it in there for a reason, despite not being able to remember it.

Note that in iOs, a touch event != a mouse event. However, there’s a very cool little snippet available from that’ll nicely convert touch events to their mouse equivalent. This little beast doesn’t require any modification of any mouse-driven JS libraries, just include it your ready handler and the rest is taken care of.