Skip to content

Instantly share code, notes, and snippets.

@roboshoes
Created April 13, 2012 10:43
Show Gist options
  • Star 35 You must be signed in to star a gist
  • Fork 14 You must be signed in to fork a gist
  • Save roboshoes/2375726 to your computer and use it in GitHub Desktop.
Save roboshoes/2375726 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);
}
})();
Copy link

ghost commented Oct 24, 2014

Thanks for this, I was going crazy trying to normalize. Touchend events can be handled, (at least in iOS Safari 7+, haven't tested everywhere), like so:

if (type == TouchMouseEvent.UP) {
    var touch = event.originalEvent.changedTouches[0];
    touchMouseEvent = normalizeEvent(type, event, touch.pageX, touch.pageY);
}

One minor caveat of your approach is that it doesn't allow calling event.preventDefault(); you must call event.originalEvent.preventDefault() after normalizing. Just a heads-up.

@warrenca
Copy link

Thanks for this! This is a life saver! I got a problem in iOS 7.1 Safari browser that when you generate a draggable element via javascript, the browser detect it as a mouse event. So you can't really drag the element.

@aram909
Copy link

aram909 commented Jul 16, 2015

How would I deal with things like targetTouches or the equivalent of that for mouse events?

@jrbramble76
Copy link

Adding this piece, in the "onMouseEvent" listener, will remove right click:

if (event.which === 3) { return; }

@butzemannbiber
Copy link

There is a problem with touch notebooks. You can't use the "Click"-Event of the mouse because its detected as Touch-Only Device ("ontouchstart" in window).

Any suggesting how to overcome this problem?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment