Touch and Swipe Events

In this article we recommend so populair and easy to use tools that can make touch and swipe handling simple. As you know, there are many libraries out there that can be used. These are just a few of them.

Hammer.js

Hammer.js is a versatile library for evens like touch, swipe and drag, as well as gestures (multi-touch events) like rotate, pinch, etc. It also allows you to create custom gestures. It supports loads of different events and is highly configurable. Remember to convert from jQuery to DOM elements.

Example:

var elt = document.getElementById("swipeMe");
Hammer(elt).on("swipeleft", function() {
    console.log("swipe left!");
}); 

You can download hammer.js from https://github.com/EightMedia/hammer.js. Check here for documentation:https://github.com/EightMedia/hammer.js/wiki/Getting-Started

Zepto.js: a good light-weight option but does not play nice with Edge

The zepto.js library, which can be found at www.zeptojs.com, is a light-weight, mobile-oriented alternative to jQuery. It provides most of the functionality of jQuery with the same API, so in principle it is possible to replacej Query by zepto and use the same code. To jQuery it, download zepto.min.js and add a reference to it to your project. If you are making your project with Sencha Animator, go to the project tab and add it as external JS. If you are using a plain html5 template, add the following code to the head of your file:

Example: Referencing zepto.min.js in your project

<script src="zepto.min.js"></script>

Being mobile-oriented, it also includes mobile-specific functions which jQuery does not, in particular support for touch and swipe events, which can be used as follows:

Example: Zepto touch events

$('#div1').tap(function(){
  console.log(“You tapped div1”);
});

$('#div2').longTap(function(){
  console.log(“You did a long tap on div2”);
});

$('#div3').swipe(function(){
  console.log(“You swiped div3 in any direction”);
});

$('#div4').swipeRight(function(){
  console.log(“You swiped div4 to the right”);
});

$('#div5').swipeLeft(function(){
  console.log(“You swiped div5 to the left”);
});

$('#div6').swipeUp(function(){
  console.log(“You swiped div6 in an upwards direction”);
});

$('#div7').swipeDown(function(){
  console.log(“You swiped div7 in a downwards direction”);
});

If you want to distinguish between single taps and double taps, you can use the following as an alternative to the tap function:

Example: Zepto single and double tap

$('#div8').singleTap(function(){
  console.log(“You tapped div8”);
});

$('#div8').doubleTap(function(){
  console.log(“You double-tapped div8”);
});

TouchSwipe

TouchSwipe is a jQuery plugin to be used with jQuery on touch input devices. Just like Hammer.js it has features among other to detect swipe directions (up, down, left, right), pinches, multiple fingers, swipe triggers.

You can download TouchSwipe and find more information from here http://labs.rampinteractive.co.uk/touchSwipe/.