jquery touchstart in browser

Question

As touchstart/touchend is yet not supported in most of the desktop browsers. How can I create touchstart event that will be the same as mousedown event (that is supported in all browsers).

I want something like this

$('obj').bind('touchstart', function(e){
});

will be translated into

$('obj').bind('mousedown', function(e){
})

Answer 1

You can bind both at once...

$('obj').bind('touchstart mousedown', function(e){
});

If you want to mousedown event to fire touchstart events automatically (so you only need to bind touchstart) use...

$(document).bind('mousedown', function(event) {
    $(event.target).trigger('touchstart');
});

Note that this means mousedown events must propagate to document before the custom touchstart event can be triggered. This could have unexpected side effects.

Answer 2

Try something like this:

var clickEventType = ((document.ontouchstart!==null)?'click':'touchstart');

$('obj').bind(clickEventType, function(e){});

Better yet, use .on() for binding:

$('body').on(clickEventType, 'obj', function(e){});

This checks document to see if touchstart exists, if it does, then your event is 'touchstart' if it doesn't (most desktop browsers) then its 'click'.

You can also trigger using the same event type:

$('obj').trigger(clickEventType);