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
Written by Macs Dickinson
Related protips
1 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
Best
#Jquery
Authors
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
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#