Skip to content

Instantly share code, notes, and snippets.

@jrbramble76
Forked from roboshoes/touchmouse.js
Last active September 11, 2015 17:02
Show Gist options
  • Save jrbramble76/dc02515ee0de09151989 to your computer and use it in GitHub Desktop.
Save jrbramble76/dc02515ee0de09151989 to your computer and use it in GitHub Desktop.
This snippet maps mouse events and touch events onto one single event. This makes it easier in the code since you have to listen to only one event regardles whether it's desktop or mobile.
(function() {
/* == GLOBAL DECLERATIONS == */
TouchMouseEvent = {
DOWN: "touchmousedown",
UP: "touchmouseup",
MOVE: "touchmousemove"
}
/* == EVENT LISTENERS == */
var onMouseEvent = function(event) {
var type;
switch (event.type) {
case "mousedown": type = TouchMouseEvent.DOWN; break;
case "mouseup": type = TouchMouseEvent.UP; break;
case "mousemove": type = TouchMouseEvent.MOVE; break;
default:
return;
}
var touchMouseEvent = normalizeEvent(type, event, event.pageX, event.pageY);
$(event.target).trigger(touchMouseEvent);
}
var onTouchEvent = function(event) {
var type;
switch (event.type) {
case "touchstart": type = TouchMouseEvent.DOWN; break;
case "touchend": type = TouchMouseEvent.UP; break;
case "touchmove": type = TouchMouseEvent.MOVE; break;
default:
return;
}
var touch = event.originalEvent.touches[0];
var touchMouseEvent;
if (type == TouchMouseEvent.UP)
touchMouseEvent = normalizeEvent(type, event, null, null);
else
touchMouseEvent = normalizeEvent(type, event, touch.pageX, touch.pageY);
$(event.target).trigger(touchMouseEvent);
}
/* == NORMALIZE == */
var normalizeEvent = function(type, original, x, y) {
return $.Event(type, {
pageX: x,
pageY: y,
originalEvent: original
});
}
/* == LISTEN TO ORIGINAL EVENT == */
var jQueryDocument = $(document);
if ("ontouchstart" in window) {
jQueryDocument.on("touchstart", onTouchEvent);
jQueryDocument.on("touchmove", onTouchEvent);
jQueryDocument.on("touchend", onTouchEvent);
} else {
jQueryDocument.on("mousedown", onMouseEvent);
jQueryDocument.on("mouseup", onMouseEvent);
jQueryDocument.on("mousemove", onMouseEvent);
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment