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.

touchmouse.js

(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);
    }
    
})();

Thanks a lot Mathias for this amazing snippet, it's working very nice with my image crop process, because of this I have mobile devices enabled. :)

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.

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?