-
-
Save roboshoes/2375726 to your computer and use it in GitHub Desktop.
(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); | |
} | |
})(); |
You just save the day, the script works perfectly and avoid to us have to write down a different script when user enter vía touch device.
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.
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.
How would I deal with things like targetTouches or the equivalent of that for mouse events?
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?
Hi, i have an html file with with mouse events in it, i linked your js file to it and tried on cordova.. but no success. can u please help me.. Thank you.