Created
April 13, 2012 10:43
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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); | |
} | |
})(); |
Adding this piece, in the "onMouseEvent" listener, will remove right click:
if (event.which === 3) { return; }
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
How would I deal with things like targetTouches or the equivalent of that for mouse events?